Height equal to 100% is not working for IFrame

Following by some topics on Stack Overflow like:

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

I wanted to nest iframe on my web page. I am using bootstrap to style web page, so I used following code:

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

Unfortunately my iframe is not resized to full height. I would like somehow to resize it automatically to full height. Do you know how I can acheive it?

---

What you want could actually be done by changing the height : 100%; value to height : 100vh; .The vh is a unit called ViewHeight, and your full screen height is actually 100vh;

Here is a post about length units from the Mozilla team.

Try this code :

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

链接地址: http://www.djcxy.com/p/88268.html

上一篇: 用div填充剩余的宽度

下一篇: 等于100％的高度对IFrame不起作用