为什么 iframe 高度 100% 在 XHTML 页面中不起作用？ [复制]答案

【问题标题】：Why does iframe height 100% not work in an XHTML page? [duplicate]为什么 iframe 高度 100% 在 XHTML 页面中不起作用？ [复制]
【发布时间】：2011-10-06 05:05:59
【问题描述】：

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

在一个测试设置中，height="100%" 工作正常，而在另一个设置中却没有，然后I noticed that 不同之处在于 iframe 高度始终设置为大约 150 像素的一个文档是 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 doctype，高度百分比不再起作用？

【问题讨论】：

标签： html iframe xhtml height

【解决方案1】：

因为页面以标准模式呈现并具有有效的 DTD。它在其他模式下工作的原因是因为它处于怪癖模式。

之所以在怪异模式下工作，是因为过去浏览器非常宽松，不严格，因此过去人们在 html/body 上没有指定高度就这样做了height="100%"。

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

iframe 可能还需要是直接子级才能发生这种情况。或者，您可以绝对/固定地定位它。

【讨论】：

感谢您提及 html/body 高度问题。
但是您是否需要设置包含iframe 的页面或其中加载的页面的html/body 高度？
Height 100% 不起作用，但在 iframe 上使用绝对位置对我来说是有效的。谢谢！