IFRAME和冲突的绝对位置 [英] IFRAME and conflicting absolute positions
问题描述
我想使用以下CSS执行动态大小的IFRAME：
#myiframe {
position：绝对;
top：0;
bottom：0;
left：0;
right：0;
}
但是，没有浏览器支持此功能。
在良好的浏览器中，我可以将IFRAME包装在带有引用的CSS样式的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％ code>在IFRAME上的大小不正确。
http：/ /jsfiddle.net/sg3s/j8sbX/
现在有几件事情你需要记住。 iframe最初是一个内联框架，所以当现代浏览器不在乎时，设置display：block就可以了。默认情况下，它也有一个边框。任何我们想要完成的任务需要在iframe容器上完成，否则我们将破坏100％的容器边界。
这是我们如何将元素：
http://jsfiddle.net/sg3s/ j8sbX / 25 / （编辑：我不好，你实际上需要在IE7的iframe上设置border = 0）
应该在IE7 +不喜欢绝对定位+使用顶部/右侧/底部/左侧来给它布局）
编辑
我们需要为iframe容器设置样式，主要是因为iframe本身不允许自己的大小为top / left / bottom / right。但是什么工作是将其宽度和高度设置为100％。因此，从那里开始，我们简单地将iframe包装在一个元素中，我们可以可靠地使样式小于100％的窗口，当父元素没有父元素的静态高度/宽度时，元素默认为大小。
考虑到它，我们可以放弃绝对和阻止。 http://jsfiddle.net/sg3s/j8sbX/26/ 可能想双重检查IE7，虽然。
在我们使iframe 100％高和宽之后，我们不能在其上放置任何边距，填充或边框，因为它将被添加到已经100％的高度&宽度。因此使它大于其容器，对于div将导致溢出：可见，只是显示一切超过边缘。但是，这反过来会搞砸边缘，paddings和偏移我们给我们的元素....事实上，使它只有100％的高度和宽度，你必须确保你删除了iframe默认边框。
在我的示例中通过在iframe中添加一个较大的边框（如3px），可以很容易地看到它是如何影响布局的。
I would like to have an IFRAME dynamically sized using the following CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
However, no browser seems to support this.
In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?
Update
MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
if you now place height: 100% on the IFRAME it will not size correctly.
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
http://jsfiddle.net/sg3s/j8sbX/
Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.
And this is how we would put an element above it:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
Edit Some extra explanation
We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.
Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.
After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.
Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.
这篇关于IFRAME和冲突的绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
