iFrame 100％高度导致垂直滚动条 [英] iFrame 100% height causes vertical scrollbar

问题描述

我看到很多关于100％高度iFrames的问题，但似乎没有像我一样的问题。

我想做的是有一个iFrame，覆盖整个视口，没有滚动条，没有设置溢出：隐藏在身体上。

我得到一个5px底部边距我的iFrame，与css，它导致垂直scroolbar。标准的建议似乎是设置溢出：隐藏在身上，但这不是真正解决问题，这是不够的我。

这里是一个超级简单< a href =http://jsfiddle.net/b64Ug/6/> jsFiddle示例。 （注意双垂直滚动条）

这种行为在我的Chrome 15，IE9和FF9中是一样的。

 解决方案

不是产生滚动条的iframe， < iframe src =http://www.bbc.co.ukframeborder =0>< / iframe>
<！ - 空白这里;这是正在提交！ - >
< / body>


如果您不想看到它，请使用

  * {line-height：0; } 
  

---

编辑：删除空格，但解决方法是一样的。默认情况下，iframe作为内联元素呈现（iframe =' inline frame'），因此有一个行高度引起问题。

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

I see alot of questions about 100% height iFrames but noone seems to have the exact same problem as I do.

What I want to do is to have an iFrame that covers the entire viewport, with no scrollbars, without setting overflow: hidden on the body.

I get a 5px bottom margin to my iFrame that won't go away with css, and it causes a vertical scroolbar. The standard advice seems to be to set overflow: hidden on the body, but that's not really solving the problem, and it's not enough for me.

Here's a super simple jsFiddle example. (notice the double vertical scrollbars)

This behaviour is the same in Chrome 15, IE9 and FF9 for me.

解决方案

It's not the iframe that produces the scrollbar, it's the whitespace after it

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

If you don't want to see it, use

* { line-height: 0; }

---

edit: Turns out the problem persists if you remove the whitespace, but the solution is the same. Iframes are rendered as inline elements by default (iframe = 'inline frame'), and thus have a line-height which causes the issue.

Alternatively, you may want to try iframe { display: block; } or a combination of both solutions.

这篇关于iFrame 100％高度导致垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！