#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上,则它的大小不正确。
解决方法
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来尝试,你应该很容易看到它如何影响布局。