PDA

View Full Version : Fixed Header and Footer w/ auto height + div scrolling...



shaitiger
Mar 4th, 2011, 10:07 PM
Hey folks, thanks again for viewing my post. I hope I can find some answers because my google searching has resulted in more frustration than relief.

This is my situation. I am working on a website where both the header and footer divs are in a fixed position.

What I need is some CSS that will allow me to have a content div (that will contain it's own scrolling, i.e. overflow:auto) in between the header and footer that will auto adjust according to the browser window (preferably w/ some margin away from the header and footer).

The content div cannot go underneath the header or footer when scrolling or when resizing the browser window. It must always stay in between them at all times. The browser scroll bar should never appear as well.

Any help would be much appreciated.

sunfighter
Mar 5th, 2011, 05:29 PM
<style type="text/css">
#header{
height: 200px;
}
#footer{
height: 200px;
}
#content{
overflow: auto;
height: 400px;
}
</style>

This has total length of 600px. Adjust as you need.

Excavator
Mar 5th, 2011, 06:08 PM
Hello shaitiger,
What you're asking is not hard, up till you say the browsers scrollbar should never appear.

For example,
If your site has an 800px min-height set on it - you will have to have a minimum set or the content could be covered completely by your fixed header/footer - what are you expecting to happen in a browser window that is opened at 400px high?

If #header and #footer are 200px as in sunfighters suggestion, it would see the 200px header and 200px of the scrollable content and never show the footer because the browser cannot scroll.