The JavaScript

The JavaScript to set iframe height to match its document's height is brief and includes just 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;
    // stackoverflow.com/questions/1145850/
    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;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

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

<iframe id="ifrm" src="pages/height1.html" onload="setIframeHeight(this.id)"></iframe>

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