Iframe inside a DIV incompatibility Chrome-Firefox

Question

If you put an iframe inside a div:

<div id="big-box">
    <iframe src="http://www.google.com" class="frame">
    </iframe>
</div>

And use CSS to ask the iframe to occupy all the available screen area:

#big-box {
    background-color: #aaf;
}

.frame {
    border: medium none;
    height: 100%;
    width: 100%;
}

It works perfect on Chrome (12.07) but it fails on Firefox (3.6.17). This demo shows that in Chrome the entire JSFiddle area contains the iframe, but if you try this sample in Firefox the iframe will occupy all width, but not all height.

Note also that if you fix width and height for big-box it works, but this is not the point (I can't change this). The point is why this incompatibility and how to fix it (do always as Chrome does).

Answer 1

The latest version of Google Chrome (14.0.835) displays the fiddle in the exact same way as the latest version of Firefox (3.6.23) and the latest version of IE (9.0.3). So you can see that Google Chrome shouldn't have done it "right" in the first place. It was displaying what you wanted by mistake...

Adding position: absolute; to the style of .frame will achieve what you're going for. It works on all three mentioned browsers.

Here's the fiddle: jsfiddle.net/Q5mt5/1

Answer 2

taking from Dennis' jsFiddle I figured you can do:

html, body
{
    width: 100%;
    height: 100%;
    padding:0px;
}
div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
}

jsfiddle works in Firefox 4 and Chrome 14 (sorry thats all I have here with me atm.)

Answer 3

Firefox is correct here. An iframe is an inline replaced element by default, so it sits on the baseline. If you add display: block; to the style for the frame class, then it will obey block sizing rules and completely cover the div.