IFRAME 和冲突的绝对位置
Posted
技术标签:
【中文标题】IFRAME 和冲突的绝对位置【英文标题】：IFRAME and conflicting absolute positions 【发布时间】：2011-04-28 02:21:48 【问题描述】：我想使用以下 CSS 动态调整 IFRAME：
#myiframe
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
但是，似乎没有浏览器支持这一点。
在好的浏览器中，我可以用引用的 CSS 样式将 IFRAME 包装在 DIV 中，并将 IFRAME 的高度和宽度设置为 100%。但这在 IE7 中不起作用。没有使用 CSS 表达式，有没有人设法解决这个问题？
更新
MatTheCat 回答了一个场景，如果 IFRAME 直接位于 body 下方并且 body/html 标签设置了 height: 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 上，它将无法正确调整大小。
【问题讨论】：
我建议您在这里“接受”两个最新答案之一，因为两者都回答了这个问题。我获得了赏金。 【参考方案1】：你可以试试这个：
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
【讨论】：
【参考方案2】：使用 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 不喜欢绝对定位 + 使用 top/right/bottom/left 来给它布局）
编辑一些额外的解释
我们需要设置 iframe 容器的样式，主要是因为 iframe 本身不会让自己的大小与上/左/下/右一起调整。但可行的是将其宽度和高度设置为 100%。因此，从那里开始，我们只需将 iframe 包装在一个元素中，我们可以可靠地设置该元素的样式以使其小于 100% 的窗口，即当父元素都没有静态高度/宽度时元素默认的大小。
考虑一下，我们实际上可以放弃绝对和阻塞。 http://jsfiddle.net/sg3s/j8sbX/26/ 可能想要再次检查 IE7。
在我们将 iframe 设置为 100% 高和宽后，我们不能在其上放置任何边距、填充或边框，因为这将添加到已经 100% 的高度和宽度中。因此使其大于其容器，对于会导致溢出的 div：可见，只是显示所有超出边缘的内容。但这反过来又会弄乱我们为元素提供的边距、填充和偏移量......事实上，要使其只有 100% 的高度和宽度，您必须确保删除了 iframe 的默认边框。
通过在我的示例中向 iframe 添加更大的边框（如 3px）来尝试一下，您应该很容易看到它是如何影响布局的。
【讨论】：
这行得通。我唯一缺少的是iframe 上的position: absolute。你能解释一下为什么我需要将iframe 包装在一个容器中而不是把容器的 CSS 放在它上面吗？即使在申请display: block...【参考方案3】：
为什么不使用高度和宽度？您仍然可以通过设置上/下和左/右来获得绝对位置，如下例所示。
<!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 上测试）。
【讨论】：
这行得通。我唯一缺少的是iframe 上的position: absolute。你能解释一下为什么我需要将iframe 包装在一个容器中而不是把容器的 CSS 放在上面吗？
把容器的CSS放在iframe上是什么意思？如果你说的是不使用容器，那么 body 元素（父元素）默认成为它的容器。
我们仍然可以通过改变iframe 上的top、left、height 和width 参数来获得相同的效果。
@Sathvik 不，我们不能。包装div在这里是必须的。【参考方案4】：
我想说看看这个堆栈溢出问题。它可能会有所帮助：
Make Iframe to fit 100% of container's remaining height
【讨论】：
【参考方案5】：html,body
margin:0;
padding:0;
height:100%;
min-height:100%;
#myiframe
width:100%;
height:100%;
border:0;
即使使用 IE7 也能正常工作。
【讨论】：
感谢您的回答。不幸的是，我在这个问题上不够具体。我已经对其进行了更详细的修改。以上是关于IFRAME 和冲突的绝对位置的主要内容，如果未能解决你的问题，请参考以下文章
php 隐藏recaptcha iframe并禁用提交按钮，直到电子邮件字段为有效电子邮件。同样绝对定位以避免风格冲突。