CSS IFRAME 和相互冲突的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3979000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IFRAME and conflicting absolute positions
提问by sg3s
I would like to have an IFRAME dynamically sized using the following CSS:
我想使用以下 CSS 动态调整 IFRAME 大小：
#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?
在好的浏览器中，我可以用引用的 CSS 样式将 IFRAME 包装在 DIV 中，并将 IFRAME 的高度和宽度设置为 100%。但这在 IE7 中不起作用。没有使用 CSS 表达式，有没有人设法解决这个问题？
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:
MatTheCat 回答了一个场景，如果 IFRAME 位于正文正下方并且 body/html 标签的高度设置为 100%。在我最初的问题中，我没有说明 IFRAME 在哪里以及应用于它的容器的样式。希望以下内容可以解决这个问题：
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
让我们假设以下容器 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.
如果您现在放置height: 100%在 IFRAME 上，它的大小将不正确。
回答by sg3s
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
使用 div 填充所有边。使用其父 div 的 100% 将 iframe 放入其中。
http://jsfiddle.net/sg3s/j8sbX/
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.
现在有几件事你需要记住。iframe 最初是一个内联框架，所以虽然现代浏览器不在乎，但在它上面设置 display:block。默认情况下，它还具有边框。我们想要完成的任何 stying 都需要在 iframe 容器上完成，否则我们将打破 100% 的容器边界。
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)
http://jsfiddle.net/sg3s/j8sbX/25/（编辑：我的错，你实际上需要在 IE7 的 iframe 上设置 border=0）
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
在 IE7+ 中应该可以正常工作（IE6 不喜欢绝对定位 + 使用上/右/下/左进行布局）
EditSome 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.
我们需要设置 iframe 容器的样式，主要是因为 iframe 本身不会让自己按上/左/下/右调整大小。但有效的是将其宽度和高度设置为 100%。因此，从那里开始，我们简单地将 iframe 包装在一个元素中，我们可以可靠地将其样式设置为小于窗口 100%，即当它们的父元素都没有静态高度/宽度时元素的默认大小。
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.
考虑一下，我们实际上可以放弃绝对和块。http://jsfiddle.net/sg3s/j8sbX/26/可能想再次检查 IE7。
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.
在我们将 iframe 设置为 100% 高和宽之后，我们不能在其上放置任何边距、填充或边框，因为它们将被添加到已经 100% 的高度和宽度上。因此使它比它的容器大，对于将导致溢出的 div：可见，简单地显示所有东西越过边缘。但这反过来又会弄乱我们为元素提供的边距、填充和偏移量.... 事实上，要使其仅为 100% 的高度和宽度，您必须确保删除 iframes 默认边框。
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 添加更大的边框（如 3px）来尝试一下，您应该能够轻松地看到它是如何影响布局的。
回答by S P
Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.
为什么不使用高度和宽度？您仍然可以通过设置上/下和左/右来获得绝对位置，如下例所示。
<!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>
This works for me (Tested on IE9).
这对我有用（在 IE9 上测试）。
回答by MatTheCat
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
work fine for me even with IE7.
即使使用 IE7，对我来说也能正常工作。
回答by InvisibleBacon
I would say take a look at this stack overflow question. It might help:
我会说看看这个堆栈溢出问题。它可能有帮助：
回答by Prachi
You can try to use this:
你可以尝试使用这个：
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
