15

我想用和包装一个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>

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

当我overflow: auto;从 div 样式中删除该属性时，它也可以工作，但这不是解决方案。

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

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

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

4

4 回答 4

25

display:block为您的元素添加iframe- 没有它，它将呈现为内联框，因此为可能显示在同一行的（假设）文本的 g、p、f 等字形的下长留出空间。

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

（vertical-align:bottom因为 iframe 也可以。）

于 2013-09-08T14:48:40.850 回答
3 
iframe { vertical-align:bottom; }

或者

iframe { display:block; }
于 2013-09-08T15:12:24.863 回答
0

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

于 2013-09-08T14:45:50.440 回答
0

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

更改甚至删除overflow:auto将解决此问题overflow:hiddenoverflow

于 2013-09-08T14:36:45.087 回答