为什么我的div标签在Chrome浏览器中计算高度为0？

Question

我正在制作一个网页(链接文本)，但在Google Chrome浏览器中遇到了高度属性的问题。如果您查看该页面，您会注意到没有背景颜色。这是因为#mainContent的高度为0px。但在Internet Explorer浏览器中，情况并非如此。有人有什么想法吗？

- Quentamia

Answer 1

这是因为内部内容被浮动了。父元素不会占用浮动子元素的高度。尝试在 #mainContent 的css中添加 overflow: hidden;。

- Greg W

Answer 2

#mainContent里的所有内容都是浮动的。浮动元素不会使其容器重新调整大小。最简单的解决方法是在#mainContent结束之前添加一个clear属性，像这样：

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

- anq

---

这是一种“hacky”的解决方案（我相信还有更多“语义”方式），但它是最简单和最常用的。+1 - Andreas Bonini

非常正确。我从来不喜欢这样做，因为它会使代码混乱，但它非常简单且得到了很好的支持。 - anq

这个也可以工作，但是将overflow: hidden添加到CSS中意味着我不必单独修改每个页面。我更喜欢这种方法。 - Quentamia

Answer 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以适应其内容。

- Henry C

Answer 4

哈哈，这将是一个难以回答的问题，因为有多种方式可以清除浮动。(您也可以尝试浮动 #mainContent)

这里有一篇精彩的 quirksmode 文章。

- attack

Answer 5

尝试明确定义默认值

height:auto;

- isildur4