嘗試在Chrome vs 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規范， height: 100%表示與height: auto相同；如果父級為auto-height，則為auto。 您的<div id="RightPane">是否指定了高度？ 如果不是這樣，則您的頁面很可能處於怪癖模式，並且WebKit在該模式下的違反程度比Gecko略高。