CODEWITHSUNDEEP
htmliframewidth
Rohita Khatiwada
Rohita Khatiwada

Reputation: 2925

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

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.

Upvotes: 33

Views: 118417

Answers (5)

Marco Valeri
Marco Valeri

Reputation: 491

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.

Upvotes: 1

Aran Tamool
Aran Tamool

Reputation: 309

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;
}

Upvotes: 0

Mohan Dere
Mohan Dere

Reputation: 4597

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

};

})();

Upvotes: 3

Chris Michaelides
Chris Michaelides

Reputation: 770

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

Upvotes: 13

avrahamcool
avrahamcool

Reputation: 14094

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.

Upvotes: 60

Related Questions