即使有滚动条，让div仍然保持页面底部的内容 [英] Make div stay at bottom of page's content all the time even when there are scrollbars

问题描述

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/

这篇关于即使有滚动条，让div仍然保持页面底部的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！