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.

by Michel Penke

HTML

<div id="iframeWrapper">
    <iframe src="https://correctiv.org/assets/lobster/index.html"></iframe>
</div>

CSS

#iframeWrapper {
    position: absolute;
    overflow: hidden;
}

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