試圖在Chrome和FF/IE下實現自動高度div相同的功能

Question

我注意到我的div在Chrome中的高度（這看起來不錯）與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%; 
} 

這裏是它的外觀下，谷歌瀏覽器。請注意RightPaneContent如何擴展以填充視口的整個高度。

下面是它的外觀下的Firefox。注意RightPaneContent沒怎麼擴大，以填補整個視口：

沒有人有我應該採取這兩種環境下實現similiar功能上什麼步驟什麼建議嗎？或者至少有一些關於這裏發生的事情的閱讀材料？

Answer 1

根據CSS規範，height: 100%與height: auto意思相同，如果父級是自動高度。你的<div id="RightPane">有指定的高度嗎？如果不是，那麼你的頁面有可能處於怪異模式，而且WebKit在這種模式下比Gecko略微違反了標準。