iFrame 100% height causes vertical scrollbar

前端未结

关注

 5  1196

Happy的楠姐

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 enti

相关标签:

5条回答

我寻月下人不归

2020-12-14 18:37
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)
发布评论:

提交评论
- 加载中...
时光取名叫无心

2020-12-14 18:54
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)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-12-14 18:54

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)

夕颜

2020-12-14 18:59
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>
    
</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)
发布评论:

提交评论
- 加载中...

忘了有多久

2020-12-14 18:59

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)