0

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

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

<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; }
4

3 回答 3

1

使用overflow:hidden属性。

“溢出：隐藏”通常用于浮动遏制的目的。然而，它可以做更多特殊的事情：防止元素的边距与其子元素折叠并防止元素延伸到相邻的浮动元素“后面”。

来源：“溢出：隐藏”的魔力</a>

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

见 jsFiddle

于 2013-09-16T09:51:03.777 回答
0

快速修复......这是一个小提琴

#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;}
于 2013-09-16T09:34:35.490 回答
0

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

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

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

CSS：

.clearfix { clear: both }

你可以看到它在这里工作：http: //jsfiddle.net/Mzxjs/

于 2013-09-16T09:48:37.570 回答