100% height with margin and dynamic content - html

Question

My project has the following requirements:
Header fixed to the top of the page
Content area has a white background and 100% height
No scroll bar when content is less than height of the screen
Must support IE7+ (a JS fix for IE is ok)
When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).
Here is my basic HTML:
<div class="wrap">
<div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>​
CSS:
body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}
​
Example: http://jsfiddle.net/zw3WS/
First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?
Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?

Answer 1

For scrolling "only in the white space", you can do it by setting position: fixed on the wrapper element, then absolutely positioning the header and content elements inside:
body{
background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
overflow: hidden; /* no scrollbars for page body */
}
.wrap {
width: 300px;
position: fixed;
top: 10px;
left: 50%; /* for horizontal centering */
margin-left: -150px; /* for vertical centering */
bottom: 0;
}
#header{
position: absolute;
background:#aaa;
top: 0;
left: 0;
right: 0;
}
#content{
background:white;
position: absolute;
bottom: 0;
top: 30px;
left: 0;
right: 0;
overflow: auto; /* this makes the scrollbar appear inside #content */
}
Demo: http://jsbin.com/osipin/1/edit
For scrolling in the page body, you need to add two elements to your markup: a background for the header, and a background for the content.
The purpose of the header background is to cover up the content when it's scrolled down, where otherwise it would appear underneath the header. What you use to cover the content is simply the same background as the page. You must size this bg element correctly so that it fills the width of the viewport, and is the height of the top margin of your content area. The real header can be horizontally centered within this bg element using a set width and margin: 0 auto.
The content background element should be an empty element which precedes the content, and has a fixed position. Its purpose is to ensure that the white area extends to the bottom of the page even when the content is shorter than the viewport height.
Your new CSS looks like this:
body, .header-bg {
background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}
.wrap {
width:300px;
margin: 0 auto;
}
.header-bg {
position: fixed;
top: 0px;
left: 0;
right: 0;
height: 40px;
}
#header {
background:#aaa;
width:300px;
margin: 10px auto 0;
}
.content-bg {
background: #FFF;
position: fixed;
width: 300px;
top: 40px;
bottom: 0;
z-index: -1;
}
And your new markup like this:
<div class="wrap">
<div class="header-bg">
<div id="header">header</div>
</div>
<div class="content-bg"></div>
<div id="content">
CONTENT
</div>
</div>
Demo: http://jsbin.com/osipin/4/edit