Default Width/Height of an Iframe

Default width/height of an IFrame

I found the answer on the dev-tech-layout mailing list -- it's part of the CSS spec. The default ratio is 2:1.

The default width of 300px is defined in the last paragraph of the CSS spec, section on the width of inline replaced elements.

Otherwise, if 'width' has a computed value of 'auto', but none of the
conditions above are met, then the used value of 'width' becomes
300px. If 300px is too wide to fit the device, UAs should use the
width of the largest rectangle that has a 2:1 ratio and fits the
device instead.

The default height of 150px is defined in the last paragraph of the CSS spec, section on the height of inline replaced elements.

Otherwise, if 'height' has a computed value of 'auto', but none of the
conditions above are met, then the used value of 'height' must be set
to the height of the largest rectangle that has a 2:1 ratio, has a
height not greater than 150px, and has a width not greater than the
device width.

iFrame has fixed width of 300px, without any styling defining 300px

The iframe-resizer doesn't resize iframe width by default. You have to explicitly specify it using sizeWidth setting.

window.iFrameResize({
  log: false,
  sizeWidth: true,
  checkOrigin: false,
  widthCalculationMethod: "rightMostElement",
  heightCalculationMethod: "lowestElement"
}, "#myFrame");

body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"></script>

<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/"></iframe>
<span>lt;/span>

Adjust width and height of iframe to fit with content in it

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

What determines the height of this iFrame?

If you check the MDN page you can read:

height

The height of the frame in CSS pixels. Default is 150.

And

width

The width of the frame in CSS pixels. Default is 300.

An iframe doesn't maitain ratio so setting width:100% will simply change the width and keep the default height to 150px.

If you want to maintain ratio you can consider the common padding trick like below:

.container {
  position:relative;
}
.container:before {
  content:"";
  display:block;
  padding-top:33%;
}
iframe {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

<div class="container">
<iframe
  class="video"
  src="https://www.youtube.com/embed/azq0S0DKS50"     
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  
  allowfullscreen>
</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>

the size of an iframe don't fit the real content

At first, it's good to know, how the elements you've used in your HTML work.

Every browser has its own default size for iframes, which is used, if the size is not given by attributes or CSS. Usually the size is nearby 300x200. The body of a document loaded into iframe adapts the width of the iframe it was loaded into, and the height is defined according to the content, if any sizing for the body haven't been defined.

A div element is a block level element, which by default takes a width of 100% of its parent element, and the height depends on the content height. However, this can be changed by setting a CSS property display: inline-block for a div, when the width will be set according to the content of a div.

There's no simple way at client side to detect the size of an arbitrary content to be loaded, before it has been parsed, hence we have to wait that happen. We can wait the iframe to finish loading and parsing on a parent page (= the page containing the iframe), or we can do that in the iframe itself. The latter simplifies referencing, so we'll use it in the following example, i.e. all the following code must be included in the file which is loaded to the iframe.

The body of the iframe:

<div>
    <span class="title">Capri A2</span>
    <br />
    <span class="big">Rutas aquí:  | P17 | E31 | T31 | E21</span>
</div>

Iframe resize in the iframe:

window.onload = function () {
    var bodyWrapper = document.querySelector('div'),
        size;

    // Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too.
    bodyWrapper.style.display = 'inline-block';

    // Get the size information of bodyWrapper
    size = bodyWrapper.getBoundingClientRect();

    // Set the iframe size
    frameElement.style.width = size.width + 'px';
    frameElement.style.height = size.height + 'px';

    // Done!
    return;
}

---

Related Topics