html - iFrame 100% 高度导致垂直滚动条

Question

我看到很多关于 100% 高度 iFrame 的问题，但似乎没有人遇到与我完全相同的问题。

我想要做的是有一个覆盖整个视口(viewport)的 iFrame，没有滚动条，没有设置 overflow: hidden on body。

我的 iFrame 有一个 5px 的底部边距，它不会随 css 一起消失，它会导致垂直滚动条。标准建议似乎是将 overflow: hidden 设置在 body 上，但这并不能真正解决问题，而且对我来说还不够。

这是一个 super 简单的 jsFiddle example . (注意双垂直滚动条)

对我来说，这种行为在 Chrome 15、IE9 和 FF9 中是相同的。

Answer 1

产生滚动条的不是iframe，是后面的空白

    <iframe src="http://www.bbc.co.uk" frameborder="0"></iframe>
    <!-- Whitespace here; This is being rendered! -->
</body>

如果你不想看到它，使用

* { line-height: 0; }

---

edit:如果您删除空格，问题仍然存在，但解决方案是相同的。默认情况下，iframe 呈现为内联元素 (iframe = 'inline frame')，因此具有导致问题的行高。

或者，您可能想尝试 iframe { display: block; } 或两种解决方案的组合。