How can I dynamically change the height of an iFrame?

Question

How can I dynamically change the height of an iFrame containing a Pardot form? I have a Pardot form that is placed on a page in my site via iFrame. I have tried a number of ways to dynamically resize the iFrame depending on the size of the form. When a user submits the form, much of the data is stored and the forms becomes shorter the next time the page is viewed. The iFrame code is as follows:

<iframe 
    src="http://go.pardot.com/..." 
    width="100%" 
    type="text/html" 
    frameborder="0" 
    allowTransparency="true" 
    style="border: 0" scrolling="no" 
    id="iframe" 
    onload="javascript:resizeIframe(this);">

</iframe>

The javascript is as follows:

function resizeIframe(obj) 
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

Answer 1

HTML:

<div class="ebookContainer">
<iframe class="ebookFrame" src="http://iFrameURL.com" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>

CSS:

.ebookContainer {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.ebookFrame {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

There is a good thread about that here: Resizing an iframe based on content And iframe resize lib here https://github.com/davidjbradshaw/iframe-resizer (I haven't yet check that plugin, but hope it could help you)

Articles above contain many usefull links.

Answer 3

Try using CSS to assign a class, called mine frame-pardot and don't set the height.

.frame-pardot {
    min-height:200px;
    max-height:800px;
    width:100%;
}

<iframe src="????????????" class="frame-pardot" scrolling="no">

Then you can also adjust for mobile devices using @media