JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<body>
    <div id="headerwrap">
        <div id="header">THE HEADER</div>
    </div>
    
    <div id="middlewrap">
                
        <div id="middle">
           BEGINNING CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE CONTENTTHETHE END
        </div>
        
    </div>
    <div id="footerwrap">
        <div id="footer">THE FOOTER</div>
    </div>
    
</body>

CSS

body,html{margin:0;height:100%;}
div#headerwrap,div#footerwrap{
    position: fixed;
    left: 0;
    right: 0;
}
div#headerwrap {
    top: 0;
	height:64px;
    background-color: red;
}
div#middlewrap {
    height:100%;
     overflow-y:auto;  
    background-color: blue;
}
div#middle{
    padding-top:70px;
    padding-bottom:10px;}

div#footerwrap{
    bottom: 0;
	height: 0;  
    background-color: green;
}