你如何给iframe 100％高度[重复]

Posted 2023-03-05

【中文标题】你如何给iframe 100％高度[重复]

【英文标题】：How do you give iframe 100% height [duplicate]

【发布时间】：2011-07-13 10:50:55

【问题描述】：

我在努力

<iframe  ...>

但它仍然没有调整它的大小。当我尝试以像素为单位的高度时，它可以工作。

编辑：100% 似乎在 IE 上工作，但不是在 firefox

【问题讨论】：

您能展示一下您正在使用的 html 代码吗？将某物设置为 100% 高度将使其具有与其父级相同的高度。 iframe 的父级是什么？

@Elad，他已经包含了 iframe 标签声明，但是没有代码格式，它是不可见的（我和你的想法一样）

@elad 没有 html 代码，我只有 html 头体 iframe。它似乎不能在 IE 中工作，虽然不是 firefox

尝试为身体设置一个高度。

@JoshCrozier 是否通常将 4 年前的问题作为重复问题关闭，以支持更新的问题，然后链接到您自己的答案？好像有点阴暗。

【参考方案1】：

你可以用 CSS 做到这一点：

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

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

【讨论】：

哇！经过这么多失败的尝试（包括一些不太优雅的 javascript 建议）试图使 IFrame 的大小始终保持在正确的高度之后，我偶然发现了这个答案，到目前为止它似乎工作得很好！感谢您为我节省了数小时的额外研究。我无法弄清楚为什么其他人没有这个作为答案？？？顺便说一句，绝对定位可以通过将 iframe 放置在相对定位的 div 中来轻松管理 - 这就是我正在做的 - 将它绝对定位在 top:0, left:0 在具有 position:relative; 的父 div 中。似乎对我有用。

iframe 所在的 也有一个高度：100%，谢谢，您的解决方案有效！我在 ASP.NET 页面中嵌入了一个 s-s-rS。

对我不起作用 :( 类似问题 :(

在 Firefox v28 中无法使用。

也许是因为这个问题/答案太老了，但position:absolute 不是必需的，事实上这不是一个好主意，除非你真的需要明确定位它......只需设置高度在父容器上。

【参考方案2】：

iframe 没有达到 100% 高度的问题并不是因为它们笨重。问题是，要让他们获得 100% 的身高他们需要父母拥有 100% 的身高。如果 iframe 的父级之一不是 100% 高，则 iframe 将无法超过该父级的高度。

所以最好的解决方案是：

html, body, iframe  height: 100%; 

...鉴于 iframe 直接位于 body 下方。如果 iframe 在自身和主体之间有父级，则 iframe 仍将获得其父级的高度。还必须明确将每个父级的高度设置为 100%（如果这是您想要的）。

测试于：

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

PS：我并不是要挑剔，但标记为正确的解决方案在撰写本文时不适用于Firefox 24，但适用于Chrome 30。不过还没有在其他浏览器上测试过。我在Firefox 上遇到了错误，因为我正在测试的页面内容很少...... 可能是我的微薄标记或CSS 重置改变了输出，但如果我遇到这个错误我猜接受的答案并不适用于所有情况。

2021 年更新

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

iframe  height: 100vh 

...确实成功了！

小心定位，因为它可能会破坏效果。彻底测试，根据您要达到的目标，您可能不需要定位。

【讨论】：

看起来有height: 100% 的父母可以解决问题。 position: absolute 与此无关。

这对我有用。另一个可行的解决方案是将 iframe 样式的高度设置为 100vh。 （vh 是视口高度）

“他们需要父母有 100% 的身高”是不正确的。如果设置为 100%，iframe 从内容中获取高度，而不是从容器中获取。

css 解决方案在 iframe 的内容发生变化时不起作用（例如，当 iframe 内容进行 ajax 调用等时）

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

【参考方案3】：

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