如何使iframe高度达到100%

Question

我正在尝试

<iframe height="100%" ...>

但它仍然无法调整大小。当我尝试使用像素高度时，它可以工作。

编辑：在IE上似乎100％正常工作，但不适用于Firefox。

- 124697

---

请问您能展示一下您正在使用的HTML代码吗？将某物设为100%高度将使其与其父元素具有相同的高度。iframe的父元素是什么？ - Elad Lachmi

对于那些在将来寻找相关信息的人，请参阅：https://dev59.com/E2025IYBdhLWcg3wqn8N#27853830 - Josh Crozier

关闭4年前的问题，转而将其标记为重复并链接到自己的答案，这种做法常见吗？这似乎有点不光彩。 - dtech

@dtech 我同意这个观点。虽然可能有些不太光彩，但我的目的是引导未来的访问者前往更受欢迎的问题，并提供各种不同的答案/解决方案。你可以在 meta 上提出这个问题。 - Josh Crozier

这个问题在我的谷歌搜索结果中出现在“更受欢迎”的答案之上，而且我认为这个问题的措辞更好：“如何给iframe设置100%的高度”与“高度为100%的全屏iframe”。 - Luke

Answer 1

你可以使用CSS实现：

<iframe style="position: absolute; height: 100%; border: none"></iframe>

请注意，默认情况下，此操作会将其放置在页面的左上角，但我猜这就是您想要实现的效果。您可以使用CSS属性left、right、top和bottom来设置位置。

- dtech

---

哇！经过多次尝试（包括一些不太优雅的JavaScript建议），我终于偶然发现了这个答案，并且目前看起来它似乎工作得非常好！感谢您为我节省了数小时的额外研究时间。我无法理解为什么其他人没有将其作为答案？顺便说一句，可以通过将iframe放置在相对定位的div中来轻松管理绝对定位-这就是我正在做的-在具有position:relative的父div中绝对定位于top:0，left:0。 对我来说似乎很有效。 - smallworld

无法使用 :( 遇到类似的问题 :( - Sakthivel

在Firefox v28中不起作用。 - L84

优雅而且它能正常工作！感谢您的才华！ - Diana

或许是因为这个问题/答案很旧，但是position:absolute不是必要的，事实上，除非你确实需要显式地定位它，否则这不是一个好主意...只需在父容器上设置高度即可。 - Wes Johnson

Answer 2

iframes无法获得100％的高度的问题并不是由于它们笨重。问题是，为了使它们获得100％的高度，它们需要其父元素具有100％的高度。如果iframe的父元素中有一个高度不足100％，则iframe将无法超出该父元素的高度。

因此，最好的解决方案是：

html, body, iframe { height: 100%; }

如果iframe直接位于body下方，则可以不用设置父元素的高度，iframe将自动获取其父元素的高度。但是，如果iframe和body之间有其他父元素，则必须显式地将每个父元素的高度也设置为100%（如果需要的话）。

测试环境：

Chrome 30、Firefox 24、Safari 6.0.5、Opera 16、IE 7, 8, 9 和 10

注：我并不是要挑剔，但在撰写本文时，被标记为正确答案的解决方案在Firefox 24上无法正常工作，但在Chrome 30上可以。尚未在其他浏览器上进行测试。我在Firefox上遇到了这个错误，因为我测试的页面内容很少...可能是我的标记太简单或者CSS重置改变了输出结果，但如果我遇到了这个错误，我猜被接受的答案并不能在所有情况下都起作用。

更新于2021年

@Zeni在2015年提出了这个建议：

iframe { height: 100vh }

...的确奏效了！

要小心位置，因为它可能会破坏效果。请仔细测试，根据您想要实现的目标，您可能不需要定位。

- Wallace Sidhrée

---

看起来使用拥有height: 100%属性的父元素就可以解决问题，而position: absolute与此无关。 - chowey

这对我很有用。另一个可行的解决方案是在iframe样式中将高度设置为100vh。 <iframe src="/mysite.com" width="100%" style="height: 100vh;"></iframe>（vh表示视口高度）。 - Zeni

“他们需要父元素高度为100%”这句话并不正确。如果将iframe设置为100％，它们会从内容中获取高度，而不是从容器中获取。 - movAX13h

我尝试了这里大多数的建议，但都没有成功，在继续之前，我注意到@Zeni的评论：在我的CSS中设置height: 100vh;解决了被忽略的height=100%;问题（即使我在HTML文件中没有viewport行）。我不需要定位... - Victoria Stuart

vh 只是视口高度，因此如果内容比视口更长，则这将不足够。 - Dan

Answer 3

在HTML5中，iFrame属性不支持百分比，只支持像素。 http://www.w3schools.com/tags/att_iframe_height.asp

- Bob Bacas