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

Question

我想将一个height 100%和width 100%的iframe元素包装到一个div with fixed size的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>

使用较旧的文档类型它可以完美运行，但是一旦我添加了 HTML5 文档类型<!DOCTYPE html>就会有一个令人不安的滚动条，它可以在周围的 div 内上下移动整个iframe元素，如果你完全向下滚动是一个奇怪的空间，我无法解释。

当我删除overflow: auto; 来自 div 样式的属性也可以工作，但这不能成为解决方案。

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

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

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

Answer 1

为您的iframe元素添加display:block – 没有它，它会呈现为一个内联框，因此为可能显示在同一行。

见小提琴： http : //jsfiddle.net/b5jgn/2/

（ vertical-align:bottom 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 。 您可以在此处阅读有关此属性和其他新属性的更多信息。 因此，您的代码将如下所示： <iframe src="" class="" seamless="seamless" style="border: none; background: blue;" height="100%" width="100%"></iframe> <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 个解决方案

解决方案1
18 已采纳 2013-09-08 14:48:40

解决方案2
2 2013-09-08 15:12:24

解决方案3
0 2013-09-08 14:36:45

解决方案4
0 2013-09-08 14:45:50

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

问题描述

4 个解决方案

解决方案1 18 已采纳 2013-09-08 14:48:40

解决方案2 2 2013-09-08 15:12:24

解决方案3 0 2013-09-08 14:36:45

解决方案4 0 2013-09-08 14:45:50

解决方案1
18 已采纳 2013-09-08 14:48:40

解决方案2
2 2013-09-08 15:12:24

解决方案3
0 2013-09-08 14:36:45

解决方案4
0 2013-09-08 14:45:50