高度等于100％不适用于IFrame

Question

以下是一些有关堆栈溢出的主题：

1. 全屏iframe，高度为100％
2. 您如何为iframe设置100％的高度[重复]
3. 使Iframe适应容器剩余高度的100％

我想将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尚未调整为完整高度。我想以某种方式自动将其调整为最大高度。你知道我能做到吗？

Answer 1

你想实际上可以通过改变做什么height : 100%;价值height : 100vh;.The VH是一个叫ViewHeight单元，并且整个屏幕的高度实际上是100vh;

这是来自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>