Menu
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.
899
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
In a web browser, if the content of an IFRAME is longer or wider than the space afforded to it by the parent page, the window will automatically display scroll bars. While this behavior is sometimes desirable, in most cases it should be avoided.
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.
Add scrolling="no" attribute to the iframe.
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.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
