JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div id = "wrapper">
    <div id = "top-row">
        Header
    </div>
    <div id = "content-row">
        Content Content <br /> Content Content Content <br />  Content Content Content <br />  Content Content Content Content Content Content Content Content Content Content Content Content Content
    </div>
</div>
<div id="bottom-row">
    Footer
</div>
</body>
</html>

CSS

#top-row {background:yellow;position:fixed;
    z-index:100;width:100%;height:100px;
top:0;} 

#content-row {padding-top:20px;margin-top:0px;background:#eee;} 

#bottom-row {color:#ddd;background:magenta;width:100%;}

/*  * bottom-fix  * according to http://ryanfait.com/resources/footer-stick-to-bottom-of-page/  */

#content-row {margin: 150px 0 0 0;}  
html, body { height: 100%; overflow-y: auto; }  
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -200px; }  
#bottom-row, .push { height: 200px; }

JavaScript

var con = document.getElementById("content-row").offsetHeight;
var top = document.getElementById("top-row").offsetHeight
var body = document.body.offsetHeight;
if((con+top)<body)document.getElementById("bottom-row").style.position="fixed";