4

Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?

The 2nd background image on this page isn't properly positioned... I'm struggling to come up with a fix... I need the footer to be at the bottom of the page, always. min-height doesn't work because I need it to always remain at the bottom regardless of their resolution.

Is there a CSS fix for this?

-URL REMOVED-

Community
  • 1
  • 1
Ben
  • 60,438
  • 111
  • 314
  • 488
  • Bottom of the page is bottom of the browser window possibly overlapping what's beneath it, or one that stays at the bottom of the window but expands if the page content is larger than that? – Trinidad Feb 18 '11 at 14:40

4 Answers4

5

Sounds like you are looking for a sticky footer.

http://ryanfait.com/sticky-footer/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
Loktar
  • 34,764
  • 7
  • 90
  • 104
1

You must set html and body to have height:100%;

then to overcome another issue with body only filling the viewport, you need to put a wrapper around all your content, set its min-height to 100% and put the background images to that.

Demo code : http://jsfiddle.net/fNwNn/3/
Live view : http://jsfiddle.net/fNwNn/3/show

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

I think what you want is position: fixed

Try this: 

#footer
{
    position: fixed;
    bottom: 0px;
}

This will 'stick' the footer to the bottom of the window.

James

Bojangles
  • 99,427
  • 50
  • 170
  • 208
-1

See if this is what you want: http://www.designersandbox.com/code/always-bottom-footer-with-css-only-tutorials/

and a live example:

http://demo.designersandbox.com/always_bottom_footer/index.html

In this example the footer does not overlap text on the page.

If you actually want the footer to be able to cover the page contents, then you should remove this line

#vc-body{padding-bottom:80px;}

from the given example. Footer now can overlap the text

Trinidad
  • 2,756
  • 2
  • 25
  • 43