Stretching iframe in HTML5

html iframe doctype
Arcturus picture Arcturus · Aug 10, 2011 · Viewed 30.7k times · Source

I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.

So the first html file (which has a red background) look like:

<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
    <iframe src="Blue.html" frameborder="0" scrolling="no"  height="100%" width="100%" />
</body>
</html>

The second (which has a blue background):

<!DOCTYPE html>
<html>    
<body style="background-color: blue;" />
</html>

If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..

With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:

With HTML5 DOCTYPE

If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:

Without HTML5 DOCTYPE

I do want the HTML doctype though, so how can I fix this? Thanks for looking!

Answer

Šime Vidas picture Šime Vidas · Aug 10, 2011

CSS:

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }

HTML:

<div id="wrap">
    <iframe src="..." frameborder="0" id="iframe"></iframe>
</div>

Live demo: http://jsfiddle.net/5G5rE/show/

Related questions

How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More
Remove border from IFrame

How would I remove the border from an iframe embedded in my web app? An example of the iframe is: <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> I would like the transition from the …

Read More