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

This question already has answers here: How do I force a DIV block to extend to the b开发者_Go百科ottom of a page even if it has no content? (18 answers) Closed 8 years ago.

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

---

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

• A Bulletproof Sticky Footer, Woohoo!

See the demo here :)

---

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.

---

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?