Make footer height extend to bottom of the page

Question

I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.

I want my footers height to expand to the bottom of the page. How can I do this?

The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it.

Heres my JSFiddle: http://jsfiddle.net/5U6ZB/2/embedded/result/

<div id="header"></div>
<div id="content">
    <!-- height is dynamic sometimes it will be full of divs that makes it
         longer than the screen height other times it only has 1 div  -->
</div>
<div id="footer">
    <!-- How do I make the footer height fill up the rest of the page height? -->
</div>

body { background-color: white; }
div  { width: 100%; }

#header {
    height: 400px;
    background-color: RGB(200,200,200);
}

#content {

}

#footer {
    background-color: RGB(112,112,112);
    /*How do I make the footer height fill up the rest of the page height?*/
}

Answer 1

html {
background-color:#093; /*the footer color*/
}

body {

background-color: #f6f; /*the body color*/
}

Answer 2

Sounds like the easiest solution in your case would be to make the body background the same colour as the footer and make your content white. This would give the illusion of the footer going all the way to the bottom.

body { background-color:RGB(112,112,112); }
div  { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */

#header {
    height: 400px;
    background-color: RGB(200,200,200);
}

#content {
    background-color:white;
}

#footer {
    background-color: RGB(112,112,112);

}

Answer 3

:root {
    background-color: siteBackgroundColor;
}

body {
    background-color: footerColor;
}

This doesn't really expand the footer, but visually expands its background color.