Make Iframe Automatically Adjust Height According to the Contents Without Using Scrollbar

Make iframe automatically adjust height according to the contents without using scrollbar?

Add this to your <head> section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

As found on sitepoint discussion.

set the iframe height automatically

Try this coding

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>

Adjust width and height of iframe to fit with content in it

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Can't find a way to automatically resize my iframe to fit its content

Creating the ifame element dynamically solved this problem.

See: Creating an IFRAME using JavaScript

And: Make iframe automatically adjust height according to the contents without using scrollbar?

Also the lang attribute seemed to be the culprit in the first place.

It’s also not very clear as to why the iframe does not respond as intended with the HTML lang attribute. Perhaps that’s only the case on this project?

Here you can find info on the iframe https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe and its attributes.

And here you have info on Global HTML attributes...https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes.

Make Iframe Automatically Adjust Height According to the Contents Without Using Scrollbar