css – IFRAME和绝对位置冲突

前端之家收集整理的这篇文章主要介绍了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相关文章