title: iframe height to fit content
body: <p>I found about 5 methods in the internet by Google searching but none of them seems to work... I see people thanking and saying that it works and I'm just getting frustrated by the fact that it doesn't work for me and I have no idea why.</p>
  
  <p>I have two files, <strong>test.html</strong> which contains the iframe and <strong>hello.html</strong> which has actual content. I want the iframe in test.html to fit it's height according to the content inside hello.html. 
  The tutorial that I'm using: <a href="http://css-tricks.com/snippets/jquery/fit-iframe-to-content/" rel="nofollow noreferrer">http://css-tricks.com/snippets/jquery/fit-iframe-to-content/</a>
  Here are the codes:</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  
      $(function(){
  
          var iFrames = $('iframe');
  
          function iResize() {
  
              for (var i = 0, j = iFrames.length; i &lt; j; i++) {
                iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
              }
  
              if ($.browser.safari || $.browser.opera) { 
  
                 iFrames.load(function(){
                     setTimeout(iResize, 0);
                 });
  
                 for (var i = 0, j = iFrames.length; i &lt; j; i++) {
                      var iSource = iFrames[i].src;
                      iFrames[i].src = '';
                      iFrames[i].src = iSource;
                 }
  
              } else {
                 iFrames.load(function() { 
                     this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                 });
              }
  
          });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;iframe src="hello.html" class="iframe" scrolling="no" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;html&gt;
  </code></pre>
  
  <p><strong>hello.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body bgcolor=”#000000″&gt;
  
  &lt;font color=”#ffffff”&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;p&gt;Child frame.&lt;/p&gt;
  &lt;/font&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is what I get:</p>
  
  <p><img src="https://i.stack.imgur.com/VqNti.png" alt="enter image description here"></p>