<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
width: 100%;
}
#header {
position:absolute;
top:0px;
left:0px;
right:0px;
overflow:hidden;
width: 100%;
height: 30px;
background-color:black;
color:white;
text-align:center;
}
#main {
position:absolute;
top: 30px;
left:0px;
right:0px;
overflow:auto;
width: 100%;
height: 100%;
}
#footer {
position:absolute;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
height:30px;
background-color:black;
color:white;
text-align:center;
}
#nav {
position:absolute;
width: 200px;
background-color:#eeeeee;
height: 100%;
text-align:center;
line-height:30px;
}
#section {
left: 250px;
position:absolute;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="main">
<div id="nav">
AAAAAAAA<br>
BBBBBBBB<br>
CCCCCCCC<br>
<button >Click Me</button>
</div>
<div id="section">
<p>
111111111111111111111111111111111111111111111111111111111111111111111
</p>
<p>
222222222222222222222222222222222222222222222222222222222222222222222
</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
