可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答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.

回答2:

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).

回答3:

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.

回答4:

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

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

回答5:

You can try to use this:

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

IFRAME and conflicting absolute positions

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

IFRAME and conflicting absolute positions

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

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