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

score 1 · Accepted Answer · answered Oct 14 '10 at 20:44

1

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

A Bulletproof Sticky Footer, Woohoo!

See the demo here :)

answered Oct 14 '10 at 20:44

Sarfraz

367,681
72
526
573

links broken on both demo and the page in the link. – kiwicomb123 Mar 07 '18 at 01:31

score 1 · Answer 2 · answered Oct 15 '10 at 08:51

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.

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

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?

edited May 23 '17 at 12:33

Community

1
1

answered Oct 14 '10 at 20:44

Don

1,550
3
22
35

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

3 Answers3

Linked