JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div id='top'>
    top - fixed height
</div>
<div id='middle'>
    middle - some content and stuff
</div>
<div id='bottom'>
    bottom - this content should scroll<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
</div>

CSS

body{
    margin:0;
    padding:0;
}

#top{
    width:100%;
    height:100px;
    background:#ccf;
}

#middle{
    float:left;
    width:100%;
    background:#cfc;
}


#bottom{
    width:100%;
    background:#fcc;
    clear:both;
    overflow:scroll;
    position:fixed;
    bottom:0;
}

JavaScript

function getDocHeight() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
}

window.onload = function() {
    document.getElementById('bottom').style.height = getDocHeight() - (100 + document.getElementById('middle').offsetHeight) + "px";
}
    
    window.onresize=window.onload;