我想使用以下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上,它将无法正确调整大小.
sg3*_*g3s 22
使用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%的高度和宽度.因此,它比它的容器大,对于会导致溢出的div:可见,只是显示一切都在边缘上.但这反过来会破坏我们给予元素的边距,填充和偏移....事实上,要使它只有100%的高度和宽度,你必须确保删除iframe默认边框.
通过在我的示例中向iframe添加更大的边框(如3px)来尝试它,您应该能够轻松地看到它如何影响布局.
你为什么不使用高度和宽度？您仍然可以通过设置顶部/底部和左/右来获得绝对位置,如下例所示.
<!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上测试).
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
即使使用 IE7 也能正常工作。
| 归档时间： |
|
| 查看次数： |
21399 次 |
| 最近记录： |