Search code examples
javascriptcssfootersticky-footer

HTML Footer that sticks to the bottom of browser unless scrollbars needed

On some webpages, the content is minimal and the footer scrunches up near my header. In these cases, I want the footer stuck to the bottom. I can do this easily in CSS with:

#footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

Works great. However, sometimes the content is not minimal and you might even need to scroll to see the content at the bottom. In those cases, I want the footer to simply come right after the content, like normal.

Is there a way to do this in just CSS? Do I need a Javascript hack? If I need a hack, is there a good library? I'm using jQuery already, so happy to use something depending on it. I don't care about IE8 or below. I only care about IE9+ and recent versions of Chrome, Firefox, Safari and Opera.

Solution

  • I used the technique described here: http://www.cssstickyfooter.com/

    Seems to work perfect aside from the requirement that you know the height of your footer ahead of time...