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

It appears that it's not working on Chrome 16, this was possibly a bug with chrome. — Shedokan, Oct 15 '11 at 18:00

Dennis · Accepted Answer · 2011-10-15T18:35:36.937

2

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

edited Oct 15 '11 at 18:35

answered Oct 13 '11 at 03:29

Dennis

14,264
2
48
57

1

you have "normalise css" on your jsFiddle. This won't help show browser differences. – James Khoury Oct 13 '11 at 03:40
@JamesKhoury: Thanks for the tip. I've never used fiddles. I just provided one since the OP asked for it. – Dennis Oct 13 '11 at 03:44
What kind of firefox version is "2.6.23"? the latest one is 10.0a1 – Shedokan Oct 15 '11 at 17:57
I meant 3.6.23. It's not the newest version after all. I only use Firefox for testing. My standard browser is Chrome... – Dennis Oct 15 '11 at 18:39

score 1 · Answer 2 · edited May 23 '17 at 11:55

1

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

edited May 23 '17 at 11:55

Community

1
1

answered Oct 13 '11 at 03:55

James Khoury

21,330
4
34
65

score 0 · Answer 3 · answered Oct 09 '11 at 20:17

0

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.

answered Oct 09 '11 at 20:17

Neil

54,642
8
60
72

I've tried to add `display:block`, but still not working. There is no changes :( – Ivan Oct 10 '11 at 07:05

Iframe inside a DIV incompatibility Chrome-Firefox

3 Answers3