How to make width and height of iframe same as its parent div?

Question

I have a iframe inside a div. I want the size of iframe to be exactly the size of its parent div. I used following code to set the width and height of iframe.

<iframe src="./myPage.aspx" id="myIframe" 
    style="position: relative; 
            height: 100%; 
            width: 100%' 
            scrolling='no' 
            frameborder='0'">

But width of iframe is not same as div, also both horizontal and vertical scrollbar are displayed.

Hildahildagard

well you missing ; after width, scrolling and frameborder and there is ' in front of the position.... – Dowland

Answer 1

you have a lot of typos.

a correct markup should be like:

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
    style="position: relative; height: 100%; width: 100%;">
...
</iframe>

also, if this frame already has an ID, why don't you put this in CSS like this (from a separate stylesheet file):

#myIframe
{
    position: relative;
    height: 100%;
    width: 100%; 
}

and HTML

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>

mind that scrolling & frameborder are iframe attribute, not style attribute.

Donar

For me position:absolute worked instead of position:relative. Got the solution from here: #5273019 – Hornpipe

Answer 2

Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:

<div id="parent">
    <div id="wrapper" style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
    </div>
</div>

I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.

And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!

Ultramundane

what cross-domain have to do here? did you mean cross browser? btw: using percantage units is a lot easier and safer for this scenario rather than using view-port units. – Donar

A height of 100vh only works if the iframe is fullscreen otherwise it will be the height of the entire window, not necessarily the content. The same as height of 100%. – Mediatize

Answer 3

To set dynamic height -

1. We need to communicate with cross domain iFrames and parent
2. Then we can send scroll height/content height of iframe to parent window

1 For communication

I prefer - https://ternarylabs.github.io/porthole/

2 Implementation

To detect iframe height change - Uses https://marcj.github.io/css-element-queries/

<script src="https://raw.githubusercontent.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://raw.githubusercontent.com/ternarylabs/porthole/master/src/porthole.min.js"></script>

For rest of the implementation refer gist -

https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8   

Parent window:

(function(){

'use-strict';

//This soultion we have used  - https://ternarylabs.github.io/porthole/
// example - 

var iFrameId: 'guestFrame',
window.onload = function(){
    // Create a proxy window to send to and receive
    // messages from the iFrame
    var windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/', iFrameId);

    var $viewPort = $('#'+iFrameId);
    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(messageEvent) {
      
      if( messageEvent.data.height == $viewPort.height() ){
        return;
      }
        $viewPort.height(messageEvent.data.height);
    });

    Porthole.WindowProxyDispatcher.start();
};


})();

iframe window:

(function(){

'use-strict';

/**
 * Iframe to Parent window communication
 * sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
 * </iframe>
 * Uses https://ternarylabs.github.io/porthole/
 * Uses https://marcj.github.io/css-element-queries/  
 */
window.onload = function(){

  var proxy = window.proxy  = new Porthole.WindowProxy('http://parent-domain.com/');
  proxy.addEventListener(function(messageEvent) {
      // handle event
  });

  //Height setup
  var iframeHeight = 0;
  
  var element = document.getElementsByTagName("BODY")[0];
  new ResizeSensor(element, function() {
    
    var scrollHeight = $('body').outerHeight();
    if (iframeHeight === scrollHeight) return false;
    
    iframeHeight = scrollHeight;
    proxy.post({
      height: scrollHeight,
    });
    
  });

  Porthole.WindowProxyDispatcher.start();

};

})();

Forgetful

The "Run code snippet" is giving some error if possible kindly resolve the same. – Celestaceleste

Answer 4

If you want to have an iframe that has the width and the height to its parent container, you can use this approach:

<style>
    .parent-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .parent-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
</style>

<div class="parent-container">
    <iframe src="https://your-iframe-url.com"></iframe>
</div>

The padding-top rule decide the width and the height of the parent container.

Knudsen

Answer 5

in my case only assigning to vh did work, so maybe try the same.

for example create the below class

.test-class{
  display: block;
  width: 100%;
  height: 50vh;
}

Cath