iFrame 100% height causes vertical scrollbar

2019-01-23 04:08发布

站内问答 / HTML/CSS
1320 5 5

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.

标签： html css iframe
举报
5条回答
趁早两清
2楼-- · 2019-01-23 04:27

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.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-01-23 04:28

To prevent the scroll bar try this:

CSS:

html, body  { height:100%; margin:0;}
.bdr    { border: thick solid grey }
.h100   { height:100%;}
.w100   { Width: 100% }
.bbox   { box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
        }
.vat    { font-size: 0; vertical-align:top}

HTML:

    <body class="bbox"><!-- no WS here--><iframe    
          class="bdr h100 w100 vat bbox" name="iframe1"
          src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

The .bbox style prevents sub divs from growing. .Vat is necessary for IE and Firefox. An alternative for .vat is: display:block. Or display:inline-block + vertical-alignment:top .brd is for demonstration purposes.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-01-23 04:36

Update:

working example in chrome 16.0.*, firefox 10.* (apparently ie9 acts up and displays a scrollbar either way -- either a disabled one if the height is set to 99% or a active one that can't scroll if height is 100%):

place the following in a html file and open it (don't know what jsfiddle is doing different, but it doesn't work the same way)

<style>
* {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /*overflow: auto;*/ /* not needed, this is the default value*/
}
</style>
<iframe src="http://www.bbc.co.uk" frameborder="0"/>
查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
5楼-- · 2019-01-23 04:38

To summarize it:

  • white space before causes 4px white space at the rigth of the iframe.
  • white space after csuses 4px white space after the iframe.

This is due to the inline character of iframe as pointed out in the first post.

查看更多
0人赞 添加讨论(0) 举报
傲
6楼-- · 2019-01-23 04:46

Not seeing a vertical scroll-bar outside of jsFiddle with this:

<html>
<head>
<style>
body {
    padding: 0;
    margin: 0;
}

iframe {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}
</style>
</head>
<body>
    <iframe src="http://www.bbc.co.uk" frameborder="0"/>
</body>
</html>

EDIT: Here's a snippet from under the Elements tabs of what gets selected when I inspect the white-space in Chrome.

Developer Tools Snip

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)