Making iFrames dynamically resize heights

Question

I know a lot of people have asked this question and I've tried everything, but none of the solutions have worked for me. I'm creating a front-end portal in ServiceNow and need to pull in multiple iframes of varying heights. I would like the iframe heights to be dynamic based on the content.

I am using a method that seems to be pretty popular on this site:

<div class="grey"> 
    <div class="container">
        <div class="row"> 
            <div class="fluidMedia">
             <iframe src="my-page" frameborder="0" ></iframe>


            </div>
         </div>
     </div>
 </div>

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

After trying this, I still have to scroll on my iframe as seen in my screenshot:

Any thoughts?

Are all of these iframes on the same domain as the main page(i.e. the page that contains these iframes)? — zer00ne, Sep 12 '16 at 21:46
Anyways, check my answer out [here](http://stackoverflow.com/a/37753146/2813224), If it helps you, upvote it, if it doesn't post a comment and I'll get back to you. — zer00ne, Sep 12 '16 at 21:52
I'm using an autoresize but in jquery, if is not a problema doing this autoresize in jquery i can share it, let me know. — grec0o, Sep 13 '16 at 10:02
@grec0o, i woudn't mind taking a look at it and see if I can apply it. At this point I'm willing to try anything. Thanks! — Dave, Sep 13 '16 at 13:56

grec0o · Answer 1 · 2016-09-14T11:21:33.163

0

Then try something like that. First add an ID and a onload to your iframe, like that:

Library

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>


<iframe src="my-page" frameborder="0" id="foo" onload="autoResize('foo')"></iframe>

And here we go with the script.

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

Test it and let me know if it worked for you.

edited Sep 14 '16 at 11:21

answered Sep 13 '16 at 15:37

grec0o

100
1
6

you added also the library? I edit the code and I add the library, just add it in the head. – grec0o Sep 14 '16 at 11:20
yea, i added the library, but it's still not working...In my code above, does it matter that I've put the FluidMedia div and iframe within three other divs? – Dave Sep 14 '16 at 18:10
no, there shoul'd not be a problem, test it with a simple iframe inside a div – grec0o Sep 16 '16 at 10:50

Making iFrames dynamically resize heights

1 Answers1