Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iFrame 100% height causes vertical scrollbar

Tags:

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.

like image 899
Per Salbark Avatar asked Feb 03 '12 13:02

Per Salbark


People also ask

How do I make my iframe height 100%?

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).

Why does my iframe have scroll bars?

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.

How do I get rid of the vertical scrollbar on my website?

To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.

How do I turn off scrolling in iframe?

Add scrolling="no" attribute to the iframe.


1 Answers

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.

like image 61
user123444555621 Avatar answered Sep 20 '22 14:09

user123444555621