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:
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.
This is precisely what position: fixed
was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/