为啥 iframe 高度 100% 在 XHTML 页面中不起作用? [复制]

Posted

技术标签:

【中文标题】为啥 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"  >
  <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"  >
  <p>iframes not suppoerted</p>
</iframe>
</body>
</html>

IE8和FF5的显示是一样的

为什么如果我有 XHTML doctype,高度百分比不再起作用?

【问题讨论】:

【参考方案1】:

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

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

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

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

【讨论】:

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

以上是关于为啥 iframe 高度 100% 在 XHTML 页面中不起作用? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

Internet Explorer 7 iframe,使高度 100%

(转)iframe 高度100%时,出现垂直滚动条

如何在 Firefox 中制作包含 div 的 iframe 100% 高度?

如何使 iframe 高度 100% ..?

iframe 高度100%时,出现垂直滚动条

如何使 hta iframe 100% 高度? [复制]