JSFiddle - React, Tailwind, and code Playground
HTML
<!-- force IE6/7 into quirks mode -->
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<h1>HEADER</h1>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h1>FOOTER</h1>
</div>
</div>
<div id="maincontent" class="float-l">
<div class="innertube">
м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/>
м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/>
м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop,
#framecontentBottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px;
overflow: hidden;
background-color: #999;
}
#framecontentBottom {
top: auto;
bottom: 0;
height: 110px;
overflow: hidden;
background-color: #888;
}
#maincontent {
position: fixed;
top: 130px;
left: 0;
right: 0;
bottom: 110px;
overflow: auto;
background: #fff;
background-color:#CCC;
}
.innertube {
margin: 15px;
}
* html body { /*IE6 hack*/
padding: 130px 0 110px 0;
}
* html #maincontent { /*IE6 hack*/
height: 100%;
width: 100%;
}