CSS Vh Units Inside an Iframe

I can not adjust the iframes height

Have you tried using an absolute unit like vh, vw or px? If you use percentage the width and height of the iframe will depend on the parent element. However, using other relative units will allow you to change the width and height of the element properly.

Absolute measurement units:

VH (Relative to 1% of the height of the viewport)
VW (Relative to 1% of the width of the viewport)
PX (Pixels)
REM (Relative to font-size of the root element)

First solution

Try including this:

iframe{

   width: 20vw;

   /* Use whichever unit you want except percentage */

}

If you want more informaton about absolute and relative css units I recommend you this website:

https://www.w3schools.com/CSSref/css_units.asp

Second solution

If you still want to use percentage, you will need to resize the parent element of the iframe. Basically all the elements whose display is "block" will expand itself horizontally all it cans, but will set its height to whatever it has inside. So if you use percentage to resize an iframe it will adopt the height of the parent element and that's not the idea.

Try resizing the parent element like this:

#container{
   height: 10vw;
}

iframe{
   height: 80%;
}

I hope this helps!

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!

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>

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>

Horizontally and vertically centered iframe with aspect ratio 16:9 that uses as much screen estate as possible without being cropped anywhere

Using JavaScript, you can listen for the resize event, which fires whenever the browser's window changes shape. Then, with some simple algebra you can calculate the dimensions of the iframe based on the dimensions of the container. Here is a demo that shows all of the requirements.

"use strict";
var container = document.querySelector('.container');var frame = container.querySelector('iframe');
function resizeVideo() { frame.width = frame.height = 0;
 var width = container.offsetWidth; var height = container.offsetHeight;
 if (height * (16 / 9) <= width) {  frame.height = height;  frame.width = height * (16 / 9); } else {  frame.width = width;  frame.height = width * (9 / 16); }}
window.addEventListener('load', resizeVideo);window.addEventListener('resize', resizeVideo);

.container { width: 90vw; height: 50vh;
 display: table-cell; text-align: center; vertical-align: middle;}

<div class="container"> <iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe></div>

Bootstrap 3 - Fill an area with an Iframe 100%

I had the issue about iframe not accepting 100% height. See this thread.

The solution is to use style="position:absolute;" on the iframe.

Responsive video iframes (keeping aspect ratio) with only CSS?

Use the new CSS viewport units vw and vh (viewport width / viewport height)

FIDDLE

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

Browser support is also good: IE9+ (caniuse)