JSFiddle - React, Tailwind, and code Playground

HTML

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top and Bottom Frames Layout</title>



</head>

<body>
    <div id="caixa">
<div id="framecontentTop">
<div class="innertube">

<h1>CSS Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget. Duis vitae vestibulum felis. Proin aliquet, eros nec auctor laoreet, tellus orci sagittis diam, in sollicitudin lectus est vitae arcu. Vivamus tincidunt aliquam eros, volutpat sagittis turpis porttitor vel. Curabitur pellentesque elementum nisl, a pharetra urna sodales in.

Sed porttitor justo sed nulla fermentum congue. Maecenas molestie aliquam enim sagittis bibendum. Nullam ornare porta egestas. Praesent eget leo tellus, non volutpat dui. In vehicula massa non enim iaculis pellentesque. Vivamus nunc velit, facilisis a varius euismod, pharetra eu mi. Aliquam velit justo, egestas ac sollicitudin imperdiet, tempus non odio.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam viverra sem justo. Nulla facilisi. Proin nec mauris purus. Nulla sem ligula, tincidunt at fermentum vitae, eleifend in quam. Aliquam erat volutpat. Nulla eleifend cursus ipsum, vitae semper lacus dapibus eget. Nunc sit amet fringilla libero....

CSS

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
    margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 800px; 
}