为什么我的DIV标记的高度在chrome中计算为0?

这是因为内部内容正在被浮动。父元素不具有浮动子元素的高度。尝试添加 overflow: hidden; 到 #mainContent CSS。

主内容中的所有内容都是浮动的。浮点数不会使容器调整大小。最简单的解决方案是在主内容结束之前添加一个清晰的内容,如:

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

我有种感觉,这与mainContent DIV的内容有关,它不能正确地将容器推出。您应该能够通过许多不同的方法来解决这个问题,例如使用clearing 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以适应其内容。

哈哈,这对你来说是个很难回答的问题,因为有很多方法可以清除浮球。(您也可以尝试浮动主内容)

这是美妙的 quirksmode article .

尝试显式定义默认值

高度:自动;