title: How to make dynamic iFrame height?
body: <p>I'm trying to make dynamic iFrame height in order to fit the content of the page.</p>
  
  <p>I have two pages. index.php and example.html</p>
  
  <p>I insert the "example.html" as an iFrame in "index.php", content height in "example.html" is changeable. </p>
  
  <p>This is my code in "index.php"</p>
  
  <pre><code>&lt;iframe src="example.html" name="iframe1" id="myiframe" marginwidth="0"
  marginheight="0" align="top" scrolling="no" width="100%" height="auto" frameborder="0"&gt;
  &lt;/iframe&gt;
  
  &lt;script type="text/javascript"&gt;
  var f = document.getElementById("myiframe");
  f.onload = function() {
    this.style.height = this.contentWindow.document.body.offsetHeight + "40px";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#myiframe {
  margin: auto;
  padding: 0px;
  float: left;
  height: auto;
  min-height: 255px;
  height: auto !important;        /* for IE as it does not support min-height */
  height: 255px;                   /* for IE as it does not support min-height */
  width: 100%;
  }
  </code></pre>
  
  <p>The iFrame works fine but the dynamic height doesn't works at all. Any suggestions? Thanks.</p>