html - iFrame 100% height causes vertical scrollbar

Question

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.

Answer 1

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.