Question

我是CSS和HTML的新手，关于浮动元素的高度我有一个问题：

当我将“content”div的高度设置为大于或等于“main”div高度时，页脚的页边顶部显示正确，但只要我将内容div的高度更改为自动，页边距页脚不起作用。我真的想知道是否有任何解决方案使内容高度自动但尊重页脚顶部。请帮我。我已经尝试了一切：各种类型的clearfixes，溢出等。

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="sidebar"></div>
        <div id="main"></div>
    </div>
    <div id="footer"></div>
</div>

#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }

Answer 1

使用overflow:hidden属性。

“overflow：hidden”通常用于 float containment 的目的。但它可以做更多特殊事情：防止元素的边距从与孩子的崩溃和防止元素在相邻的浮动元素后面“延伸”。

来源：The magic of “overflow: hidden”

#content{
    width:800px;
    height:auto;
    background:#999;
    overflow:hidden;
}

see jsFiddle

Answer 2

快速修复...这是Fiddle

#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}

Answer 3

您的设置问题是，当您将height #container设置为auto时，其高度实际上会计算为零。这是因为#container包含纯粹浮动的元素，在计算#container的高度时会忽略它们。

要解决此问题，请在#content内添加clearfix，但在任何其他内容之后。例如：

<div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
    <div class="clearfix"></div>
</div>

CSS：

.clearfix { clear: both }

您可以在此处看到它：http://jsfiddle.net/Mzxjs/

浮动的divs有高度

3 个答案: