html - 尝试在 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%;
}

这是它在谷歌浏览器下的样子。请注意 RightPaneContent 如何扩展以填充视口(viewport)的整个高度。

这是它在 FireFox 下的样子。请注意 RightPaneContent 如何没有展开以填充整个视口(viewport):

有没有人对我应该采取哪些步骤来在两种环境下实现类似的功能有任何建议？或者至少有一些关于这里发生的事情的阅读 Material ？

Answer 1

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