Question

我有以下代码（从我的来源简化）：

<div class="container">
    <div class="body">
        <div class="mainstuff">...</div>
        <div class="secondarystuff">...</div>
    </div>
    <div class="footer">...</div>
</div>

问题在于，当浏览器呈现页面时，它会将.body解释为具有0高度，因此，页脚位于.mainstuff和{{的顶部1}}。它像.secondarystuff和.mainstuff一样溢出.body。

如何为body设置属性，以便根据内容调整其大小？如果内容不在元素内部，它可以工作，但似乎根据子div调整它的高度......

感谢

Answer 1

请提供更多代码。

很可能你的内部DIV要么是浮动的，要么是绝对的。如果它们是浮动的，则向父div添加overflow:hidden应调整大小以适合内部div。

根据您的描述，似乎mainstuff和secondarystuff似乎position:absolute，而且可能不必如此。如果是，则应将position:relative添加到您的body class div

Answer 2

如果你是浮动元素，那么.body（以及所有其他具有浮动子元素的元素）应该有这个CSS属性来正确地说明它们的高度：

overflow: auto;

通过查看该代码，您似乎试图制作一个粘性页脚。我使用这个CSS和HTML，因为它可以很好地修改：http://www.cssstickyfooter.com/

Answer 3

虽然在大多数情况下设置溢出确实有效，但您不应该使用它，因为它会导致问题，因为CSS3变得更加普遍。您将至少遇到文本阴影和框阴影的显示问题。如果需要清除浮动，则应使用最新的clearfix方法。

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

使用其内容自动调整块级元素的大小

3 个答案: