title: Computing a cross-browser iframe height
body: <p>One of the most difficult problems in my javascript experience has been the correct (that is "cross-browser") computing of a <strong>iframe height</strong>.
  In my applications I have a lot of dynamically generated iframe and I want them all do a sort of autoresize at the end of the load event to adjust their height and width.</p>
  
  <p>In the case of <strong>height</strong> computing my best solution is the following (with the help of jQuery):</p>
  
  <pre><code>function getDocumentHeight(doc) {
    var mdoc = doc || document;
    if (mdoc.compatMode=='CSS1Compat') {       
        return mdoc.body.offsetHeight;
    }
    else {
      if ($.browser.msie)
        return mdoc.body.scrollHeight;
      else  
        return Math.max($(mdoc).height(), $(mdoc.body).height());
    }
  }
  </code></pre>
  
  <p>I searched the internet without success. I also tested Yahoo library that has some methods for document and viewport dimensions, but it's not satisfactory.
  My solution works decently, but sometimes it calculates a taller height.
  I've studied and tested tons of properties regarding document height in Firefox/IE/Safari: <code>documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ...</code>
  Also jQuery doesn't have a coherent behavior in various browser with the calls <code>$(document.body).height(), $('html', doc).height(), $(window).height()</code></p>
  
  <p>I call the above function not only at the end of load event, but also in the case of dynamically inserted DOM elements or elements hidden or shown. This is a case that sometimes breaks the code that works only in the load event.</p>
  
  <p>Does someone have a real cross-browser (at least Firefox/IE/Safari) solution? Some tips or hints?</p>