JSFiddle - React, Tailwind, and code Playground

by GeekStocks

HTML

<body>
    <div id="wrapper">

    </div>
</body>

CSS

html {width: 100%; height: 100%;}
html, body, div {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    padding: 0px; border: none; margin: 0px; /* areas do not inherently have extra space */
}

body {background-color: gray;}

#wrapper {position: relative; width: 250px; height: 100%; background-color: lightgray; border: 2px solid black}
#h {position: absolute; top: 0px; width: 100%; height: 16px; background-color: lightblue;}
#t {position: absolute; top: 16px; width: 100%; height: 10px; background-color: red;}
#f {position: absolute; bottom: 0px; width: 100%; height: 32px; background-color: green;}

JavaScript

/*
    // hold html here, commented out
    <div id="h">Header fixed at 16px</div>
    <div id="t">Table needs to fill variable space between header and footer</div>
    <div id="f">Footer fixed at 32px</div>
*/