How to create div to fill all space between header and footer div

Question

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.

Answer 1

<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?

Answer 2

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

height: 100%;

Answer 3

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.

Answer 4

#footer {
 clear: both;
}

Answer 5

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>