尝试在Chrome与FF/IE下实现相同的自动高度div功能

Question

我注意到我在Chrome (看起来不错)和FireFox/IE中的div的高度有差异。

下面是我的HTML标记(为了保持代码的整洁，我删除了其中的所有其他选项卡)：

<div id="RightPane">
    <div id="RightPaneContent">
        <ul>
            <li><a href="#tabs-6">Plan View</a></li>
        </ul>
        <div id="tabs-6">
            <%= Html.Partial("PlanViewTab", Model) %>
        </div>
    </div>
</div>

#RightPaneContent
{
    min-width: 433px;
    height: 100%;
}

这是它在Google Chrome下的样子。请注意RightPaneContent如何展开以填充视口的整个高度。

​

​

这是它在FireFox下的样子。请注意，RightPaneContent没有展开以填充整个视口：

​

​

有没有人建议我应该采取什么步骤来在两种环境下实现相似的功能？或者至少是一些关于这里正在发生的事情的阅读材料？

Answer 1

根据CSS规范，如果父元素是自动高度的，则height: 100%的含义与height: auto相同。你的<div id="RightPane">有指定的高度吗？如果没有，你的页面很可能处于怪癖模式，而WebKit只是在这种模式下比Gecko稍微违反了标准。