Question

我绝对将页脚放在浏览器窗口的底部，使用以下代码：

HTML

<html>
    <body>
        <div id="content">
            Content
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

CSS

#content {
    margin-bottom: 20px;
    background: red;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: blue;
}

这可以按预期工作，但是当我使浏览器窗口变小时，页脚最终会覆盖主要内容。防止这种情况的最有效方法是什么？

提前致谢。

Answer 1

您需要Sticky Footer。

Demo

这是使用伪元素的another example。对于旧版本的IE，您可能会遇到一些问题，但它允许您放弃非语义元素。

Answer 2

试试这个：

#content {
    padding-bottom: 20px;
    background: red;
}

#footer {
    position:fixed; //Changed to fixed
    bottom:0px;
    width:100%;
    height: 20px;
}

绝对定位的div浮动在主要内容上

2 个答案: