html - 为什么 iframe 高度 100% 在 XHTML 页面中不起作用？

<分区>

我正在玩一个嵌入第二页的 iframe，并且只在 iframe 上方显示一个短标题。

在一个测试设置中，height="100%" 正常工作，而在另一个设置中它没有，然后 I noticed that不同之处在于，iframe 高度始终设置为大约 150px 的文档是一个 XHTML 文档，而它工作的文档没有设置 DOCTYPE。

所以，这是有效的:(高度完全缩放到窗口)

<html>
<head> </head>
<body>
<h1>Wrapper Header ...</h1>
<hr/>
<iframe src="/jenkins" width="100%" height="100%">
  <p>iframes not suppoerted</p>
</iframe>
</body>
</html>

而这个没有(高度大约150px左右)

<!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>

在IE8和FF5中显示是一样的。

为什么如果我有 XHTML 文档类型，高度百分比不再有效？

最佳答案

因为页面使用有效的 DTD 在标准模式下呈现。它在另一种模式下工作的原因是因为它处于怪癖模式。

之所以在 quirks 模式下工作是因为浏览器在过去非常宽松而不严格，因此人们在 height="100%" 中没有指定 html/body 的高度过去。

现在正确的做法是在 html/body 上设置高度。尝试类似 html, body { height:100%; }

为了实现这一点，iframe 可能还需要是直接子级。或者，您可以将其定位为绝对/固定。

关于html - 为什么 iframe 高度 100% 在 XHTML 页面中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6708461/