Grow your CSS skills. Land your dream job.

A Bulletproof Sticky Footer, Woohoo!

Published by Chris Coyier

Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? One problem is that on pages that are a bit vertically challenged, the footer might end up in the middle of the page instead of down at the bottom of the browser window where it should be.

Shouldn't there be some kind of way to get a footer DIV to just sit at the bottom of the browser window no matter the size of the window? Yes, there should be, there is no obvious solution and has been an issue plaguing CSS kind for too long.

A solution has been found! Ryan Fait has coded a beautifully simple way to do this (with valid code!) and has generously shared the technique here. It works in all major browsers (IE, FireFox, Safari, and Opera) and is completely free to use at your will. Thanks Ryan!

Comments

  1. Kapten
    Permalink to comment#

    Hi!
    I cant get this to work if the content is more than the pages or browsers height. Then i just put the footer at the bottom as ‘usual’.
    Any tip how to fix it?

  2. Ryan
    Permalink to comment#

    This does work if you’re NOT using absolute positioning on your page.

    Any idea how to get a sticky footer to work when using absolute positioning?

  3. bob
    Permalink to comment#

    Ryan’s solution is pretty cool.
    But it breaks in ways that can’t be fixed if you are using set height on elements.
    So, it’s pretty useless if you are setting the heights of content-containing divs.
    I’ve used it a few times, but I’m wary of it.

  4. Frodo
    Permalink to comment#

    This is not working for me, the footer always covers the content when the browser window is small.

  5. Mikkel Hansen
    Permalink to comment#

    This is great, but just one question… Can I get the footer to sit on top of the content?
    That way, no matter how long the content is, the footer will always be visible.

  6. Permalink to comment#

    Try this one http://www.cssstickyfooter.com

    It won’t break when you resize window and works with floating 2 column layouts.

  7. sadunaresh
    Permalink to comment#

    was trying to know what is the difference between sticky footer and normal footer…. It is just as simple…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".