JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <p></p>
</div>
<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="footer">
    <p>What's this line's purpose? You could put a slideshow above and enter &ldquo;Scroll down for more&rdquo; here.</p>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
.header {
    background-color: #aaaaaa;
    color: #fff;
    min-height: 60px;
}
p {
    padding: 10px;
    margin: 0;
}
.wrapper:before, .wrapper:after {
    content: "";
    display: table;
}
.wrapper:after {
    clear: both;
}
.wrapper {
   
}
.wrapper div {
    width: 25%;
    background-color: #5da7e5;
    float: left;
}
.wrapper div:nth-child(even) {
    background-color: #1c82d8;
}

JavaScript

var callback = function () {	
	
    var windowSize = $(window).height();
    var headingHeight = $('.header').height();
    var footerHeight = $('.footer').height();
	var wrapperHeight = (windowSize - headingHeight) - footerHeight;
	
    $('.wrapper div').height(wrapperHeight);
    $('.header p').text('This div has ' + headingHeight + 'px height. The columns below are calculated to have ' + wrapperHeight + 'px height. Notice how well the columns adjust when this line wraps.');

};
$(document).ready(callback);
$(window).resize(callback);