Question

我想将iframe元素与height 100%和width 100%一起打包到div with fixed size。

我试过这样：

<div style="height: 410px; width: 480px; border: 1px solid black; overflow: auto;">
    <iframe src="" style="border: none; background: blue;" height="100%" width="100%"></iframe>
</div>

使用较旧的doctypes，它可以很好地工作，但是只要我添加HTML5 doctype <!DOCTYPE html>，就会有一个令人不安的滚动条，可以将整个iframe元素上下移动到周围的div中如果你完全向下滚动有一个奇怪的空间，我无法解释。

当我从div-style中删除overflow: auto;属性时，它也有效，但这不是解决方案。

我不明白的是为什么iframe元素下面有这个奇怪的空格/边距？

以下是您可以尝试的演示：http://jsfiddle.net/tmuecksch/b5jgn/

我在Safari 7.0和Firefox 23.0.1中尝试过它。

Answer 1

为display:block元素添加iframe - 如果没有，则将其呈现为内联框，因此留下空间用于g，p，f等字形的长度不足。（假设的）文本可能显示在同一行。

请参阅小提琴：http://jsfiddle.net/b5jgn/2/

（iframe的vertical-align:bottom也可以使用。）

Answer 2

iframe { vertical-align:bottom; }

或

iframe { display:block; }

Answer 3

原因是overflow:auto允许div在内部内容不适合时滚动，并且100％高度导致两种样式发生冲突。如果他们理论上没有iframe可以继续扩展。

将overflow:auto更改为overflow:hidden甚至删除overflow可以解决此问题

Answer 4

在我看来，最好使用HTML5中的新属性seamless。您可以阅读有关此属性和其他新属性here的更多信息。因此，您的代码将如下所示：<iframe src="" class="" seamless="seamless" style="border: none; background: blue;" height="100%" width="100%"></iframe>。不幸的是，一个相当大的问题是浏览器支持这个属性。但是，2013年更新的浏览器应该起作用。如果有效的话，现在让我吧！我在Opera 15.0和Chrome 29中测试它，它可以工作。

在div中嵌入100％高度的iframe具有奇怪的底边距

4 个答案: