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

【问题标题】：Height equal to 100% is not working for IFrame等于 100% 的高度不适用于 IFrame
【发布时间】：2018-01-03 06:24:39
【问题描述】：

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

我想在我的网页上嵌套 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%" height="100%" width="100%"></iframe>
</div>

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

【问题讨论】：

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

标签： html css iframe

【解决方案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.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>

【讨论】：

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