title: dynamically resize iframe height based on dynamic content
body: <p>First, I'll give you the structure of my page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div&gt;
      &lt;iframe&gt;
          &lt;div id="div1"&gt;
          &lt;/div&gt;
      &lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If only I knew ahead the size of <code>div1</code>, there's no problem here. However, I am dynamically adding contents into <code>div1</code> using jquery ajax and so I could not pre-set the <code>&lt;iframe&gt;</code>'s height.</p>
  
  <p>I've tried the solutions I found in other threads by adding some script in the <code>onload</code> of the <code>&lt;iframe&gt;</code> but it's useless since the contents are dynamically changing without reloading the page.</p>
  
  <p>Any help?</p>