Bill the Lizard Bill the Lizard - 4 years ago 138
HTML Question

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

I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

Update:



It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

Answer Source

Sticky footer on Google:

  1. Have a <div> with class="wrapper" for your content.

  2. Right before the closing </div> of the wrapper place the <div class="push"></div>.

  3. Right after the closing </div> of the wrapper place the <div class="footer"></div>.

* {
    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 */
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download