<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html { height: 100%; }
body {
margin: 0;
padding: 0;
height: 100%;
background-color: orange;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
overflow: hidden;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: red;
overflow: hidden;
}
#outer-wrapper {
position:relative;
height:100%;
width: 100%;
background-color: green;
overflow: auto;
}
#inner-wrapper {
height:100%;
width: 15em;
margin: auto;
padding: 0 20px;
background-color: blue;
overflow:auto;
}
</style>
</head>
<body>
<div id="outer-wrapper">
<header> HEADER </header>
<div id="inner-wrapper">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<footer> FOOTER </footer>
</div>
</body>
</html>
</body>
</html>
I think that is it actually. Fixes over flow problem automatically thanks to this