IE ignores percentage height in block div inside 100% height div with display:table-cell

Question

I want a design like this:

         --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      |  |
        |  |-----------------------------|  |
        -------------------------------------

This is the code I'm using: http://jsfiddle.net/yKPq3/18/ , which works just fine in Chrome and Firefox. However IE (9) doesn't expand the inner div, the one that should have 96% of the height of its parent.

How do I get this to work on IE, without Javascript , if at all possible? I'm not sure how to go about it.

Also I've noticed Opera ignores the 96% height specification as well, so I guess it must be my fault.

Answer 1

I updated your solution http://jsfiddle.net/yKPq3/24/

Your parent element has no height associated with it so your child element doesn't know what to be 96% of..

<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>