IFRAME and conflicting absolute positions

Viewed 22541

I would like to have an IFRAME dynamically sized using the following CSS:

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

However, no browser seems to support this.

In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?

Update

MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:

<html>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

and let's assume the following container CSS:

#container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

if you now place height: 100% on the IFRAME it will not size correctly.

5 Answers
Related