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

H Bellamy picture H Bellamy · Jan 11, 2012 · Viewed 683.3k times · Source

CSS Push Div to bottom of page

Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow.

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

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

But all it does is go to the bottom of the viewport, and stays there even if you scroll down, so it is no longer at the bottom.

Image: Examlple

Sorry if not clarified, I don't want it to be fixed, only for it to be at the actual bottom of all the content.

Answer

Joseph Silber picture Joseph Silber · Jan 11, 2012

This is precisely what position: fixed was designed for:

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

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