Menu
I'm playing around with an iframe that embeds a second page and just displays a short header above the iframe.
In one test setup, height="100%" worked correctly and in another setup it didn't and then I noticed that the difference was the the one document where the iframe height always was set to about 150px was an XHTML document, and the document where it works doesn't have a DOCTYPE set.
So, this works: (height fully scaled to window)
<html>
<head> </head>
<body>
<h1>Wrapper Header ...</h1>
<hr/>
<iframe src="/jenkins" width="100%" height="100%">
<p>iframes not suppoerted</p>
</iframe>
</body>
</html>
and this doesn't (height about 150px or so)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> </head>
<body>
<h1>Wrapper Header ...</h1>
<hr/>
<iframe src="/jenkins" width="100%" height="100%">
<p>iframes not suppoerted</p>
</iframe>
</body>
</html>
Display is the same in IE8 and FF5.
Why is it that the height percentage no longer works if I have XHTML doctype?
253
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
The width and height inside the embed code can be adjusted by changing the numbers between the quotation marks, shown below. The standard size of an iframe for desktop is a width of "560" and height of "315."
Because the page renders in standards mode with a valid DTD. The reason it worked in the other mode is because it was in quirks mode.
The reason why it works in quirks mode is because browsers were very lenient and not strict in the past, and thus people did height="100%" without specifying heights on html/body in the past.
The proper way to do it now is to set heights on the html/body. Try something like html, body { height:100%; }
The iframe might also need to be the immediate child in order for this to happen. Alternatively you can probably position it absolutely/fixed.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
