Make iframe fill remaining height of div in IE

Question

I have a div which contains another div of unknown height and an iframe .

I want to make the iframe fill the remaining height of the parent div . After a lot of searching the only way I've found to do this is by using CSS tables which works in every browser except IE.

This is the HTML I'm using:

<div class="container">
    <div class="top">
        <div style="height: 100px; background: yellow">Top bar</div>
    </div>
    <div class="bottom">
        <iframe />
    </div>
</div>

This is the CSS:

.container {
    position: relative;
    display: table;
    height: 300px;
    width: 200px;
    text-align: center;
}

.top {
    display: table-row;
}

.bottom {
    /* changing this to table-row works correctly except the iframe no longer expands to the full height in IE */
    display: table-cell;
    height: 100%;
    background: blue;
}

iframe {
    background:red;
    height:100%;
    height:100%;
    position:relative
}

JSFiddle (Changed the iframe to a div)

In non-IE browsers, the iframe fills the remaining space. In IE the iframe height is set to the same height as the .container . So the full height ends up being the height of the .container plus the height of .top .

This image might explain a bit better:

IE has set the height of the iframe to the full table height but as .top has a height too, it makes the table become larger than the specified height.

Is there anyway to fix this without using JS? I don't want to use JS as it means making sure it updates when things are resized, inserted, etc.

Answer 1

Try height:100%; auto height:100%; auto and see what that does