Adapting iframe height to its content with 2 lines of javascript

In a project, I have to use an iframe and I need that its height is automatically calculated based on its content. However is not possible to accomplish this by simply setting the attribute height to 100%, instead we must smartly use javascript to dynamically assign that value after a computation. The solution I’m going to show you is not 100% my work but instead an optimization and a better implementation of clever intuitions I found on the web.
The “trick” works in this way:

1. The iframe should has an ID assigned:

<iframe 
   id="slideshow_frame" 
   src="frame.html" 
   frameborder="0" 
   width="100%" 
   marginheight="0" 
   marginwidth="0" 
   scrolling="no"
></iframe>

2. the page loaded into the iframe should contains all the html into an “easy retrievable” container (a div with an ID is perfect!):

<div id="content">
    <div style="background: red; width: 400px; height: 120px"></div>
    <div style="background: green; width: 400px; height: 300px"></div>
    <div style="background: yellow; width: 400px; height: 60px"></div>
</div>

3. on the iframe’s page “onload” event, a function will be executed to adjust its height:

function resizeIframe(iframeID) 
{		
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById('content');
    iframe.style.height = container.offsetHeight + 'px';			
} 

14 thoughts on “Adapting iframe height to its content with 2 lines of javascript

  1. Charles says:

    I am at a loss as to why this is not working. Please advise!

    I have inserted all the data as you have stated, yet still am having no luck in regards to having the iframe extend to 100% of the height of the page being iframed into the site.

    Here is my code:

    And at the top of the page before the tag I input this:

    function resizeIframe(iframeID) {

    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById(“content”);

    iframe.style.height = container.offsetHeight + “px”;

    }
    //–>

    Thanks for the help-
    Charles

  2. Max says:


    Charles:

    I am at a loss as to why this is not working. Please advise!
    I have inserted all the data as you have stated, yet still am having no luck in regards to having the iframe extend to 100% of the height of the page being iframed into the site.
    Here is my code:
    And at the top of the page before the tag I input this:
    function resizeIframe(iframeID) {
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById(“content”);
    iframe.style.height = container.offsetHeight + “px”;
    }
    //–>
    Thanks for the help-
    Charles

    You might need the javascript tags to wrap this code.

  3. Neeraj Surana says:

    Once the iFrame is loaded is it possible to change the size later based on it’s content? I need it because the content changes dynamically.

  4. Cheers man!! This works like a bomb! Even works if you set the outer container heights as percentages which is good for responsiveness!

Leave a Reply