IE忽略百分比高度框格內100％的高度分度顯示：表細胞

Question

我想設計這樣的：

  --Fixed width & height wrapper ---- 
     | ----------------------------- | 
     | | Fixed-height header  | | 
     | ----------------------------- | 
     | |-----------------------------| | 
     | | Expands to fill rem.height | | 
     | |        | | 
     | | ------------------------- | | 
     | | | Just a bit less tall | | | 
     | | | than parent (96% of it) | | | 
     | | |-------------------------| | | 
     | |        | | 
     | |---------------------------- | | 
     | ------------------------------| | 
     | | Fixed-height footer  | | 
     | |-----------------------------| | 
     ------------------------------------- 

這是我使用的代碼：http://jsfiddle.net/yKPq3/18/，其工作只是正常在Chrome和Firefox中。然而，IE（9）不擴展內部div，應該有96％的父級高度。

如何在IE上使用此工作，沒有Javascript，如果可能的話？我不知道如何去做。

另外我注意到Opera也忽略了96％的高度規格，所以我想這肯定是我的錯。

Answer 1

我更新您的解決方案http://jsfiddle.net/yKPq3/24/

你的父元素沒有與之相關聯的高度，使你的子元素，不知道什麼是96％..

<div id="wrapper"> 
<div class="table"> 
    <div class="row row1">row1</div> 
    <div class="row row2"> 
     <div style="display:table-cell; vertical-align:middle; height:100%;"> 
      <div id="container"> 
       <div style="display:table; height:100%;"> 
        <div style="display:table-cell; vertical-align:middle;"> 
         Hi there 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row row3">row3</div> 
</div>