IE使用display：table-cell忽略100％高度div中的块div中的百分比高度

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，内部div的高度应为其父级的96％。

我如何才能在没有Javascript的情况下在IE上使其正常工作？ 我不确定该怎么做。

我也注意到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>