等于 100% 的高度不适用于 IFrame

Posted 2023-03-05

【中文标题】等于 100% 的高度不适用于 IFrame

【英文标题】：Height equal to 100% is not working for IFrame

【发布时间】：2018-01-03 06:24:39

【问题描述】：

关注 Stack Overflow 上的一些主题，例如：

Full-screen iframe with a height of 100% How do you give iframe 100% height [duplicate] Make Iframe to fit 100% of container's remaining height

我想在我的网页上嵌套 iframe。我正在使用引导程序来设置网页样式，所以我使用了以下代码：

<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
    <iframe id="iFrame1" src="<test_link_here>" frameborder="0" style="overflow:hidden;height:100%;width:100%"  ></iframe>
</div>

很遗憾，我的 iframe 没有调整到全高。我想以某种方式将其自动调整为全高。 你知道我是怎么做到的吗？

【问题讨论】：

高度 100% 大部分情况下都不起作用。试试 100vh.

【参考方案1】：

你想要的实际上可以通过将height : 100%;值更改为height : 100vh;来完成。vh是一个叫做ViewHeight的单位，你的全屏高度实际上是100vh；

这里是 a post 来自 Mozilla 团队的关于长度单位的信息。

试试这个代码：

<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
    <iframe id="iFrame1" src="http://www.***.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>

【讨论】：

感谢您的帮助，但不幸的是，这段代码并没有解决问题。行为还是一样的

是的，这正是我想要的。非常感谢！