How to Give Iframe 100% Height

How do you give iframe 100% height

You can do it with CSS:

<iframe style="position: absolute; height: 100%; border: none"></iframe>

Be aware that this will by default place it in the upper-left corner of the page, but I guess that is what you want to achieve. You can position with the left,right, top and bottom CSS properties.

Full-screen iframe with a height of 100%

You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

An alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

To hide scrolling with 2 alternatives as shown above:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack with the second example:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

Height equal to 100% is not working for IFrame

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>

Make Iframe to fit 100% of container's remaining height

Update in 2019

TL;DR: Today the best option is - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. Here is a code sample for flexbox:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

HTML iframe maximum height, height:100% not working

Use CSS calc() to make this work.

html, body {  margin: 0;  height: 100%;             /* need for iframe height 100% to work */}iframe {  box-sizing: border-box;   /* make the border size be included in the height */  display: block;           /* make them block to fix white space margin */  width: 100%;}iframe:nth-child(1) {  height: 40px;}iframe:nth-child(3) {  height: 15px;}iframe:nth-child(2) {  height: calc(100% - 55px);  /* 55px = sum of menu/footer iframe height */}

  <iframe name="menuFrame" src="menu.htm" frameborder="1">  </iframe>  <iframe name="contentFrame" src="content.htm" frameborder="1">  </iframe>  <iframe name="footerFrame" src="footer.htm" frameborder="1">  </iframe>

CSS: iframe not displaying 100% height...more like 100px height

Try like this:

Give position: absolute; and border:none; to your IFRAME along with height:100% to get expected result.

HTML:

<iframe width="100%" height="100%" src="http://purcraft.com/madeinla/home2_height.html" style="position: absolute; height: 100%; border: none"></iframe>