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

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。这可能是有用的链接：

• 什么是清除修复？
• http://nicolasgallagher.com/micro-clearfix-hack/

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

Answer 2

正如我之前在 OP 中的评论中提到的，问题是因为 的两个子元素div都是浮动的。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。由于父元素不包含子元素，因此height: auto不起作用（实际上，会起作用但没有效果）。

选项 1：删除float: lefton “review-container” 并将height: auto按预期工作，但这具有 JrnDel 评论中提到的一些含义。

选项 2（最佳）：您可以添加一个 clearfix div，正如您自己在 OP 中的评论和 JrnDel 在此答案的评论中提到的那样。