csspositioningcss-positionfooter

Make div stay at bottom of page's content all the time even when there are scrollbars

I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.

I have a div with id="footer" and the following CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.

How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.

Image: Example

Solution

  • This is precisely what position: fixed was designed for:

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

    Here's the fiddle: http://jsfiddle.net/uw8f9/