JSFiddle - React, Tailwind, and code Playground

by valerio

HTML

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS

html {height:100% /*this is important */}
body {
    margin:0;
    padding:0;
    height:100% /* this is important */;
        background:pink;
}

#wrapper
{
   width:300px;
   height:100%; /* this works only if both body and html have height:100%*/
    background:red;
}

#first
{
   width:300px;
   height:200px;
   background-color:#F5DEB3;
}

#second
{
   width:300px;
   /*javascript will dynamically get the height*/
   background-color:#9ACD32;
}

JavaScript

// this function gives a div a dynamic height based on the heights of other divs and in relation of the window innerheight. the window won't scroll

(function () {


    var heights = $("#wrapper").outerHeight(true);
    var outerHeights = $("#first").outerHeight(true);
    jQuery('#second').css('height', (heights - outerHeights) + "px");

})();