Height equal to 100% is not working for IFrame

Question

Following by some topics on Stack Overflow like:

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

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?

Answer 1

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>