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>

IE忽略100％高度div内的块div中的百分比高度，显示：table-cell

1 个答案: