JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<div id="top"></div>
<div id="middle"></div>
<div id="middleRelative"></div>
<div id="bottom"></div>

CSS

html, body { height:100%; }

#top {
    width:100%;
    height:100px;
    position:fixed;
    top:0;
    z-index:10;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); /* Chrome,Safari4+ */
}
#middle {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    z-index:1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
}
#middleRelative {
    width:100%;
    position:relative;
    float:left;
    clear:both;
}
#bottom {
    width:100%;
    height:1500px;
    position:relative;
    float:left;
    clear:both;
    z-index:7;
    background:#00ff00;
}

JavaScript

function setHeight() {
    var x = $(window).height();

    var math = x - 100;

    var box = document.getElementById("middleRelative");
    box.style.height = math + 'px';
}

$(window).ready(function() {
    setHeight();
});
$(window).resize(function() {
    setHeight();
});