A Centered Fluid Iframe

Styles can be used to size and center the iframe horizontally (using percentage width and margin auto, adding text-align center on the body for old versions of Internet Explorer.)

JavaScript is used to size and position the iframe vertically. Resize your browser window to see the iframe resized and repositioned accordingly.

function setIframeHeight(id, h) {
    if ( document.getElementById ) {
        var theIframe = document.getElementById(id);
        if (theIframe) {
            dw_Viewport.getWinHeight();
            theIframe.style.height = Math.round( h * dw_Viewport.height ) + "px";
            theIframe.style.marginTop = Math.round( (dw_Viewport.height - 
                parseInt(theIframe.style.height) )/2 ) + "px";
        }
    }
}

window.onload = function() { setIframeHeight('ifrm', .8); }
window.onresize = function() { setIframeHeight('ifrm', .8); }

Since the code is only interacting with the iframe element and not with the document inside the iframe, there is no cross-domain security restriction on this code, so you could load an external file, say Google for example.

You can use your browser's menu commands to view the source code of the current document. You can right-click on an iframe to access the source code of the document contained inside it. This tutorial's examples are available for download in a zipped file.