tags:

views:

9067

answers:

5

I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. Thea header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.

A: 
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>

Are you trying to say you want the footer to always be right at the bottom of the screen no matter how they resize the page rather than floating up the page when the content is very short? What about if the content is very long and it forces the footer off the bottom of the screen?

Craig
You've got it. The footer should always be at the bottom, unless the content is larger in which case it would push the footer down further.
Jeremy
+1  A: 

if you are trying to maximize the height of your content div, in the CSS add

height: 100%;

Mitchel Sellers
I found that if you have 3 divs, for example:<div id="header">...</div><div id="content">...</div><div id="footer">...</div>and you make the content div 100% height, it will size the the height of the page, but waht I want is for it to size to the height of the page minus the other divs
Jeremy
+3  A: 

To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.

For a full explanation and example, see Ryan Fait's CSS Sticky Footer.

Since you know the size (height) of your header, put it inside the content div (or use margins).

Position absolute will give you problems if your content is larger (taller) than the window.

Traingamer
A: 
#footer {
 clear: both;
}
+2  A: 

To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>
Jeremy