开发者

Why does iframe height 100% not work in an XHTML page? [duplicate]

This question already has answers here: Full-screen iframe with a height of 100% (20 answers) Closed 7 years ago.

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?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜