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

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)!


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();

};

})();

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.

Tags:

Html

Iframe

Width

Recent Posts