Iframe height to height of the content inside

0 votes
asked Mar 17, 2017 by anonymous

Can someone please explain how to set the iframe height equal to the height of the content inside


2 Answers

0 votes
answered Mar 17, 2017 by Suleman Asghar

You can set the Iframe height Dynamically by using this code. Let me know if you still have any confusion

<head> <title>Parent frame</title> </head>

        <body onload=”resizeFrame(document.getElementById(‘childframe’))” bgcolor=”#cccccc”>

       <script type=”text/javascript”>
     // Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
      function resizeFrame(f) {
    f.style.height = f.contentWindow.document.body.scrollHeight + “px”;

 <p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<iframe frameborder=0 border=0 src=”./child-frame.html” name=”childframe”        id=”childframe”>

0 votes
answered Mar 17, 2017 by Edward

There is no solution out there that works 100% on all browsers to make iframe height to the content inside but you can try

<iframe src="hello.html"
 onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">

alternatively i suggest you to use jquery.load() to load html content inside a div instead of using an iframe.


<div id="iframe-alternative"></div>


and you can style your div .

Using iframe is very bad practice, and there is a debate out there to remove . If your website is accessible via <iframe on some other domains you may become the victim of clickjacking.