making a div extend all the way down to the bottom of the page

Question

My website has varaible content length, and this sometime means that the footer does not site at the bottom of the page, is there a way to make the footer fill whatever space is left?

http://www.ibdnetwork.co.uk/members-content/forums

Answer 1

Take a look at excellent post at CSS-Tricks.Com:

• A Bulletproof Sticky Footer, Woohoo!

See the demo here :)

Answer 2

css

#footer {
  position:fixed !important;
  bottom:0;
}

This should do it. You can add a padding on your content wrapper that have the height of your footer + 50px or something like that, for spacing between content and footer. The footer will be on top of your content else.

Answer 3

There are multiple approaches to this problem. One is to have

html, body { height:100%; }

in your CSS. This, however, might create issues on pages that scroll vertically. For complex cases you will have to resort to JavaScript onResize coding.

See if this helps:

How do I force a DIV block to extend to the bottom of a page even if it has no content?