Two fixed positioned containers top and bottom with z-index to avoid text being visible when scrolled. Top and bottom margin for the content container. That's it
Scroll on the body
http://fiddle.jshell.net/NZP9v/16/show/
http://fiddle.jshell.net/NZP9v/16
And a variation with extra container inside the fixed positioned top and bottom container with max-width. http://fiddle.jshell.net/hAvA8/3/show
Scroll on the content container
Here a variation with scroll on the content: http://fiddle.jshell.net/u6VzU/4/show
And a variation with extra container inside the fixed positioned top and bottom container with max-width with the scroll on content: http://fiddle.jshell.net/nZK6Q/5/show/
scroll on the content container with a max-height
http://fiddle.jshell.net/ZmPv5/1/show
The CSS for full-height window, menus top and bottom, with scrolling centred content
http://fiddle.jshell.net/zu2zq/2/show
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
.max-width {
background-color: #00FF00;
margin: 0 auto;
max-width: 1500px;
padding: 10px;
}
#container {
background-color: #E9E9E9;
height: 100%;
margin: 40px auto;
max-width: 1500px;
position: relative;
}
#content {
border-bottom: 80px solid rgba(0, 0, 0, 0);
height: 100%;
margin: 40px 0 0;
overflow: auto;
padding: 20px;
position: relative;
}
#topmenu {
height: 40px;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 10;
}
#bottommenu {
bottom: 0;
height: 40px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: 20;
}
The fixed container needs an extra div to make the centered nax-width play ok.
<div id="topmenu">
<div class="max-width">Top Menu Here
</div>
</div>