JSFiddle - React, Tailwind, and code Playground

by hephistocles

HTML

<body>
    <div id="wrap">
        <div id="header"><div class="unknownHeight"></div></div>
        <div id="content">
            <div class="start">This is the start</div>
            <div class="end">This is the start</div>
        </div>
    <div id="footer"><div class="unknownHeight"></div></div>  
</div>    
</body>

CSS

#header {
width:100%;
background-color:#123;
position:Absolute;
top:0;    
}
#footer{
    width:100%;
    background-color:#000; 
    position:absolute;
    bottom:0px;    
}
.unknownHeight {
height:30px;        
}
html, body { 
        height: 100%; 
}

#wrap {
    position:relative;
    background-color:#AAA;   
    height:100%;
}

#content {
height:100%;
background-color:#B74;    
}