A Centered Fluid Iframe

Styles can be used to size and center the iframe horizontally: (percentage width and margin auto, adding text-align center on the body for 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); }

An external JavaScript file is used for obtaining cross-browser window dimensions.

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.

Use your browser's menu commands to view source and save the example document.