PDA

Click to See Complete Forum and Search --> : fixed header with fluid content?

cbVision
11-05-2009, 12:57 PM
Greetings,

I'm trying to create a page where the header is a set height and the content will stretch to the remaining height of the screen with an overflow of scroll. So I want the content to be scrollable, but the header to always remain at the top.

You can see an mockup of what I'm trying to do here:
http://img692.imageshack.us/img692/2328/fixedheader.jpg

Is this possible without using JavaScript? The only scrolling I want is the content area.

It seems like something easy; however it's really causing a headache! Any ideas?

Thanks!
ssystems
11-05-2009, 03:18 PM
As much as I want to avoid using absolute positioning:


#wrapper{
height: 100%;
}
#header{
height:100px;
}

#contents{
position: absolute;
top: 100px;
bottom: 0px;
overflow: auto;
}


And the html


<body>
<div id="wrapper">
<div id="header"> &nbsp;</div>
<div id="contents">body</div>
</div>
</body>
cbVision
11-05-2009, 04:53 PM
Wow, that does seem to do the trick. Thanks!
cbVision
11-12-2009, 03:31 PM
Darn, doesn't work in IE6. After several more failed attempts, I may have to conclude that it's only possible across all browsers with JavaScript.