4

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?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
bontade
  • 3,194
  • 6
  • 48
  • 75

1 Answers1

7

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>
Louis 'LYRO' Dupont
  • 1,052
  • 4
  • 15
  • 35