IFRAME and conflicting absolute positions

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.

标签： css iframe css-position

5条回答

The star\"

2楼-- · 2019-01-24 00:40

I would say take a look at this stack overflow question. It might help:

Make Iframe to fit 100% of container's remaining height

0人赞添加讨论(0) 举报

男人必须洒脱

3楼-- · 2019-01-24 00:48

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.

0人赞添加讨论(0) 举报

Luminary・发光体

4楼-- · 2019-01-24 00:48

You can try to use this:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

5楼-- · 2019-01-24 00:53

Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
                border:0px;
                height:100%;
                width:100%;
            }
            #container {
                position: absolute;
                top: 10px;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
            #myiframe {
                position: absolute;
                top: 0%;
                left: 0%;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

This works for me (Tested on IE9).

0人赞添加讨论(0) 举报

孤傲高冷的网名

6楼-- · 2019-01-24 00:55

html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

work fine for me even with IE7.

0人赞添加讨论(0) 举报

IFRAME and conflicting absolute positions

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间