为什么我的 div 标签的高度在 Chrome 中被计算为 0？答案

【问题标题】：Why is the height of my div tag being calculated as 0 in Chrome?为什么我的 div 标签的高度在 Chrome 中被计算为 0？
【发布时间】：2010-07-24 09:51:58
【问题描述】：

我正在处理网页 (link text)，但我在使用 Google Chrome 中的 height 属性时遇到了问题。如果您查看该页面，您会注意到没有背景颜色。这是因为 #mainContent 的高度为 0px。在 Internet Explorer 中，情况并非如此。有人有想法吗？

【问题讨论】：

标签： google-chrome css

【解决方案1】：

这是因为内部内容是浮动的。父元素不采用浮动子元素的高度。尝试将overflow: hidden; 添加到#mainContent css。

【讨论】：

【解决方案2】：

#mainContent 中的所有内容都是浮动的。浮动不会调整其容器的大小。最简单的解决方案是在 #mainContent 之前添加一个明确的权利，如下所示：

<div id="mainContent">
<!-- inner bars -->
<div style="clear:both;"></div>
</div>

【讨论】：

这是一个“hacky”解决方案（我相信还有更多“语义”方法），但它是最简单且最常用的方法之一。 +1
完全正确。由于杂乱无章，我从不喜欢这样做，但它非常容易并且得到很好的支持。
这个也可以，但是在 CSS 中添加 overflow: hidden 意味着我不必单独修改每个页面。我更喜欢它。

【解决方案3】：

我感觉这与#mainContent div 的内容没有正确推出容器有关。您应该能够通过多种不同的方式解决此问题，例如使用清除 div。

添加以下css：

.clearfix{
    clear:both;
}

并在关闭 maincontent div 之前添加一个带有 clearfix 类的 div：

<div id="mainContent">
    <div id="rightSide">
     ...
    </div>
    <div id="content">
     ...
    </div>
    <div class="clearfix"/>
</div>

这应该提醒浏览器强制打开 mainContent div 以适应其内容。

【讨论】：

【解决方案4】：

哈哈，这将是一个很难检查的问题，因为有多种方法可以清除浮动。（您也可以尝试浮动#mainContent）

这里是精彩的quirksmode article。

【讨论】：

【解决方案5】：

尝试明确定义默认值

高度：自动；

【讨论】：