Question

我一直在使用绝对高度值开发一个网站，并且很好奇为什么height:auto不适合我，有人可以对此有所了解。

HTML结构

<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>

CSS

#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}

#menuconatiner{
margin:5px;
float:left;
width:190px;}

Answer 1

使用以下CSS，您将不再需要height属性。

#reviews-content {
  display: table;
}

你的div没有自动扩展高度的原因是因为它包含浮动元素，但你没有使用clearfix。这可能是有用的链接：

我上面的解决方案现在可以解决您的问题，但我建议将来使用clearfix。

Answer 2

正如我之前在OP中的评论中所提到的，问题是因为div的子元素都被浮动了。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。由于父级不包含子元素，height: auto不起作用（实际上，它将起作用但不起作用）。

选项1：删除“审核容器”上的float: left，height: auto将按预期工作，但这有一些影响，如JrnDel的评论中所述。< / p>

选项2（最佳）：您可以在OP中自己的评论和JrnDel中为此答案的评论中添加一个clearfix div。

为什么不是高度：自动为站点容器工作

2 个答案: