高度为100％不工作的IFrame

Question

通过堆栈溢出一些主题，比如下面：

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

我想窝iframe在我网页。我使用bootstrap风格的网页，所以我使用以下代码：

<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团队的长度单位的a post。

试试这个代码：

<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>