IFRAME and conflicting absolute positions

Question

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

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    rig         


        

Answer 1

Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.

http://jsfiddle.net/sg3s/j8sbX/

Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.

And this is how we would put an element above it:

http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)

Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)

Edit Some extra explanation

We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.

Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.

After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.

Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.