100% width/height IFRAME

There is a trick for creating an element to fill the document by setting all four `top`, `right`, `bottom`, `left` properties, and letting the browser calculate the size of the element. However, it doesn't seem to apply to IFRAMEs the same as it does to block-level or inline elements (see http://jsfiddle.net/thirdender/ULHbs/). An extra DIV wrapper is necessary to make this trick work.

HTML

<div id="iframeWrapper">
    <iframe src="javascript:'IFRAME element'"></iframe>
</div>

CSS

#iframeWrapper {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
}

#iframeWrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: lightBlue;
}