IFRAME 和冲突的绝对位置答案

【问题标题】：IFRAME and conflicting absolute positionsIFRAME 和冲突的绝对位置
【发布时间】：2011-04-28 02:21:48
【问题描述】：

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

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

但是，似乎没有浏览器支持这一点。

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

更新

MatTheCat 回答了一个场景，如果 IFRAME 直接位于 body 下方并且 body/html 标签设置了 height: 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 上，它将无法正确调整大小。

【问题讨论】：

我建议您在这里“接受”两个最新答案之一，因为两者都回答了这个问题。我获得了赏金。

标签： css iframe css-position

【解决方案1】：

你可以试试这个：

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

【讨论】：

【解决方案2】：

使用 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 不喜欢绝对定位 + 使用 top/right/bottom/left 来给它布局）

编辑一些额外的解释

我们需要设置 iframe 容器的样式，主要是因为 iframe 本身不会让自己的大小与上/左/下/右一起调整。但可行的是将其宽度和高度设置为 100%。因此，从那里开始，我们只需将 iframe 包装在一个元素中，我们可以可靠地设置该元素的样式以使其小于 100% 的窗口，即当父元素都没有静态高度/宽度时元素默认的大小。

考虑一下，我们实际上可以放弃绝对和阻塞。 http://jsfiddle.net/sg3s/j8sbX/26/ 可能想要再次检查 IE7。

在我们将 iframe 设置为 100% 高和宽后，我们不能在其上放置任何边距、填充或边框，因为这将添加到已经 100% 的高度和宽度中。因此使其大于其容器，对于会导致溢出的 div：可见，只是显示所有超出边缘的内容。但这反过来又会弄乱我们为元素提供的边距、填充和偏移量......事实上，要使其只有 100% 的高度和宽度，您必须确保删除了 iframe 的默认边框。

通过在我的示例中向 iframe 添加更大的边框（如 3px）来尝试一下，您应该很容易看到它是如何影响布局的。

【讨论】：

这行得通。我唯一缺少的是iframe 上的position: absolute。你能解释一下为什么我需要将iframe 包装在一个容器中而不是把容器的 CSS 放在它上面吗？即使在申请display: block...

【解决方案3】：

为什么不使用高度和宽度？您仍然可以通过设置上/下和左/右来获得绝对位置，如下例所示。

<!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 上测试）。

【讨论】：

这行得通。我唯一缺少的是iframe 上的position: absolute。你能解释一下为什么我需要将iframe 包装在一个容器中而不是把容器的 CSS 放在上面吗？
把容器的CSS放在iframe上是什么意思？如果你说的是不使用容器，那么 body 元素（父元素）默认成为它的容器。
我们仍然可以通过改变iframe 上的top、left、height 和width 参数来获得相同的效果。
@Sathvik 不，我们不能。包装div在这里是必须的。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

感谢您的回答。不幸的是，我在这个问题上不够具体。我已经对其进行了更详细的修改。