css – IFRAME和绝对位置冲突

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

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

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

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

更新

如果IFRAME位于正文的正下方，body / html标签的高度设置为100％，则MattheCat应用了一个工作方案。在我的原始问题中，我没有说明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;
}

如果现在将高度：100％放在IFRAME上，则它的大小不正确。

解决方法

使用div来填充所有的边。使用其父div的100％放置iframe。

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

现在有一些你需要记住的事情。一个iframe原来是一个内联框架，所以当现代浏览器不关心的时候，设置display：block就可以了。默认情况下，它也有一个边框。任何我们想要完成的任务都需要在iframe容器上完成，否则我们将破坏100％的容器边界。

这就是我们如何把一个元素放在它上面：

http://jsfiddle.net/sg3s/j8sbX/25/(编辑：我的坏，你实际上需要设置边框= 0在iframe为IE7)

应该在IE7中工作正常(IE6不喜欢使用顶部/右/底部/左侧的绝对定位给它布局)

编辑一些额外的解释

我们需要对iframe容器进行风格化，主要是因为一个iframe本身不能让自己的大小与上/左/下/右对齐。但是，将宽度和高度设置为100％将会起什么作用。所以从那里开始，我们简单地将iframe包装在一个元素中，我们可以可靠地创建样式，使窗口小于100％，当父元素没有一个静态高度/宽度时，这些元素默认为大小。

想想，我们实际上可以放弃绝对和阻止。 http://jsfiddle.net/sg3s/j8sbX/26/可能想要仔细检查IE7。

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

通过在我的示例中添加一个更大的边框(如3px)到iframe来尝试，你应该很容易看到它如何影响布局。

css – IFRAME和绝对位置冲突

解决方法

相关文章