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

Question

我注意到Chrome中我的div（看起来不错）与FireFox / IE的高度之间存在差异。

这是我的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规范，如果父级为auto-height，则height: 100%与height: auto的含义相同。您的<div id="RightPane">是否指定了高度？如果没有，很可能你的页面处于怪癖模式，并且WebKit在该模式下比Gecko稍微违反了标准。