6

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?

Community
  • 1
  • 1
Martin Ba
  • 37,187
  • 33
  • 183
  • 337

1 Answers1

14

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.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434