html - 如何在没有绝对值的情况下将 div 附加到底部？

Question

所以我有一个页脚：

<div id="footer" >
    <div style="padding:20px;">
        Footer
    </div>
</div>

这是在包装风格：

#page { width:964px; margin:0 auto; }

所以我需要将页脚 div 附加到浏览器的底部。问题是如果我添加：

position:absolute;
bottom:0;

以前的一些 div 与页脚相交，而且我需要自己设置高度和宽度。

Answer 1

试试这样。。

CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

的HTML

<div class="wrapper">
    <p>wrapper text here</p>    
    <div class="push"></div>
</div>

<div class="footer">
    <p>footer text here.</p>
</div>

Answer 2

这不完全是您所要求的，但它是我使用position: fixed.

对于您要实现的目标，您将需要使用position: absolute它来实现它。然后您将不得不手动给出元素的高度以使其正确适合。而当你在里面有内容的时候footer，你可以用它padding来完善形状。

这些是唯一可能的选择。要么去fixed定位，要么absolute定位。

Answer 3

利用：

#footer {
    position: fixed;
    bottom: 0;
}

这是一篇很好的文章，可以了解如何position:工作