JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

<div id="sheet">
    <div id="header">&nbsp;</div>
    <div class="divider"></div>
    <div class="content">
        <div class="vmenu">&nbsp;</div>
        <div class="pagecontent">&nbsp;</div>
    </div>
    <div class="divider"></div>
    <div id="footer">&nbsp;</div>
</div>

</body>
</html>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;}
#sheet {
    width: 500px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
    height: 100%;
    display: table;}
#header {
    height:40px;
    display: table-cell;
    background:#333;}
.content {
    min-height:100%;
    display: table-row;
    background:#555;
    }
.divider {
    height: 10px;
    display: table-row;
    }
.vmenu {
    width:190px;
    float: left;
    margin:10px;
    background: silver;}
.pagecontent {
    margin:10px;
    overflow: hidden;
    background: darkblue;}
#footer {
    height: 50px;
    background: #4c4e5a;
    display: table-row;}