The JavaScript

The JavaScript to set iframe height to match its document's height includes two functions. The getDocHeight function obtains the height of the document for cross-browser cooperation in both standards and quirks mode documents. There is no standard way of obtaining document height, so a variety of properties are checked to determine which contains the largest value.

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;

The setIframeHeight function sets the iframe element's height to match the contained document's height.

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document; = 'hidden'; = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears = getDocHeight( doc ) + 4 + "px"; = 'visible';

A call to the function setIframeHeight is added to the iframe element's onload attribute:

<iframe id="ifrm" src="pages/height1.html"

Read on for more information about the use of this code.