Question

我想使用以下CSS动态调整IFRAME：

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

但是，似乎没有浏览器支持此功能。

在优秀的浏览器中，我可以使用引用的CSS样式将IFRAME包装在DIV中，并设置高度和放大倍数。 IFRAME的宽度为100％。但这在IE7中不起作用。没有使用CSS表达式，有没有人设法解决这个问题？

更新

MatTheCat回答了一个场景，如果IFRAME直接位于正文下方且body / html标签的高度为100％，则该场景有效。在我最初的问题中，我没有说明IFRAME的位置以及适用于它的容器的样式。希望以下内容解决这个问题：

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

让我们假设以下容器CSS：

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

如果您现在将height: 100%放在IFRAME上，则无法正确调整大小。

Answer 1

在所有边上使用div作为填充。使用100％的父div将iframe放入其中。

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

现在有一些事情你需要记住。 iframe最初是一个内联框架，所以虽然现代浏览器不关心，但在它上面设置display：block。默认情况下，它还有一个边框。我们想要完成的任何操作都需要在iframe容器上完成，否则我们将打破100％容器边界。

这就是我们如何将元素置于其上方：

http://jsfiddle.net/sg3s/j8sbX/25/（编辑：我的不好，你实际上需要在IE7的iframe上设置border = 0）

IE7 +应该可以正常工作（IE6不喜欢绝对定位+使用顶部/右侧/底部/左侧给它布局）

修改一些额外的解释

我们需要设置iframe容器的样式主要是因为iframe本身不会使其自身的大小为top / left / bottom / right。但是可行的是将宽度和高度设置为100％。所以从那里开始我们简单地将iframe包装在一个我们可以可靠地设置样式的元素中，使得窗口小于100％，当元素没有静态高度/宽度时，元素默认为大小。

考虑到它我们实际上可以放弃绝对和阻止。 http://jsfiddle.net/sg3s/j8sbX/26/可能想要对IE7进行双重检查。

在我们将iframe设为100％高和宽后，我们不能在其上放置任何边距，填充或边框，因为它将被添加到已经100％的高度＆amp;宽度。因此，它比它的容器大，对于会导致溢出的div：可见，只是显示一切都在边缘上。但这反过来会破坏我们给予元素的边距，填充和偏移....事实上，要使它只有100％的高度和宽度，你必须确保删除了iframe默认边框。

通过在我的示例中向iframe添加更大的边框（例如3px）来尝试，您应该能够轻松地看到它如何影响布局。

Answer 2

为什么不使用身高＆amp;宽度？通过设置顶部/底部和底部，您仍然可以获得绝对的位置。左/右，如下例所示。

<!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>

这对我有用（在IE9上测试过）。

Answer 3

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

即使使用IE7也能正常使用。

Answer 4

我想说看看这个堆栈溢出问题。它可能有所帮助：

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

Answer 5

你可以尝试使用它：

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

IFRAME和相互冲突的绝对头寸

5 个答案: