如何使 html iframe 100% 的宽度和高度？ [复制]

Posted 2023-03-05

【中文标题】如何使 html iframe 100% 的宽度和高度？ [复制]

【英文标题】：how to make a html iframe 100% width and height? [duplicate]

【发布时间】：2011-03-19 09:07:20

【问题描述】：

如何使 iframe 的窗口宽度和高度为 100%？

【问题讨论】：

这里有一些建议：***.com/questions/5867985/iframe-100-height

由于以下几个原因，这与副本实际上不是同一个问题：a）这个问题问“如何”，而另一个问题问“在哪里：（如“哪些浏览器”），b）这个问题比另一个“问题”早了整整一年，c）另一个问题质量较低，写得不好，格式也不好。d）两个答案相同的问题不要重复（即 1+1 和 4/2 是两者都是 2 但不是同一个问题）。

@mikel 答案未发布到其他问题中。我想“如何构建 100% iframe”和“如何制作 100% 宽度，可能在页面上存在之后”是不一样的。

【参考方案1】：

此代码可能对您有所帮助。

<iframe src="" onload="this.width=screen.width;this.height=screen.height;">

【讨论】：

this.width 设置这个标签的宽度。 screen.width 获取屏幕宽度值。这段代码使这个标签（iframe）宽度=屏幕宽度，它的高度=屏幕高度-对不起

screen 是实际屏幕而不是浏览器窗口，所以大多数情况下浏览器窗口会小于屏幕尺寸。

这在大多数情况下都适用于我，显然在使用 javascript 的情况下。为非 js 寻找这样的解决方案。非常感谢。

window.innerWidth / window.innerHeight 要准确得多。

【参考方案2】：

回答这个问题以防万一像我这样的其他人在许多建议使用 JavaScript 将 iframe 高度更改为 100% 的帖子中偶然发现这篇文章。

我强烈建议您在使用基于 JavaScript 的选项之前查看并尝试在 How do you give iframe 100% height 指定的此选项。到目前为止，在我所做的所有测试中，引用的解决方案都非常适合我。希望这对某人有所帮助。