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;
    // 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.