Hello all,

While working on a project, we came across a situation where we had an iframe that had dynamic content inside it,

and to make our page responsive, we were not allowed to give fix height to the iframe, but since the iframe had the dynamic content, we wanted to set the size of the iframe on the run time, based on the inner content of it, so to do this we found the

following solution :

In JavaScript we use following block of code :

<script>
  // Set size of iframe dynamically
    function SetSize(id) {
        $('#'+id).height(0);
        var newheight = $('#'+id).contents().height();
        $('#'+id).height(newheight);
        $('#'+id).width('100%');
    }
<script>

In html we had following block of code :

<div>
<iframe id="MyIframe" src="MyPage.html" onload="SetSize('MyIframe')"></iframe>
</div>