高度等于100%不适用于IFrame

时间:2017-07-27 13:27:06

标签: html css iframe

关于Stack Overflow的一些主题如下:

  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
  4. 我想在我的网页上嵌套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没有调整到全高。我想以某种方式将其自动调整到全高。 你知道我怎么能实现它吗?

1 个答案:

答案 0 :(得分:4)

通过将height : 100%;值更改为height : 100vh;,您可以实际完成所需的操作。 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>