Html iFrame 100% 高度导致垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9129182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iFrame 100% height causes vertical scrollbar
提问by Per Salbark
I see alot of questions about 100% height iFrames but noone seems to have the exact same problem as I do.
我看到很多关于 100% 高度 iFrame 的问题，但似乎没有人遇到与我完全相同的问题。
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.
我想要做的是拥有一个覆盖整个视口的 iFrame，没有滚动条，没有设置溢出：隐藏在身体上。
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.
我的 iFrame 有一个 5px 的底部边距，它不会随着 css 消失，并且会导致垂直滚动条。标准的建议似乎是设置overflow: hidden 到body 上，但这并不能真正解决问题，对我来说还不够。
Here's a super simple jsFiddle example. (notice the double vertical scrollbars)
这是一个超级简单的jsFiddle 示例。（注意双垂直滚动条）
This behaviour is the same in Chrome 15, IE9 and FF9 for me.
这种行为在 Chrome 15、IE9 和 FF9 中对我来说是一样的。
回答by user123444555621
It's not the iframe that produces the scrollbar, it's the whitespace after it
产生滚动条的不是 iframe，而是它后面的空格
<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 = 'inlineframe'), and thus have a line-height which causes the issue.
编辑：如果删除空格，问题仍然存在，但解决方案是相同的。默认情况下，iframe 呈现为内联元素（iframe = '内联框架'），因此具有导致问题的行高。
Alternatively, you may want to try iframe { display: block; }or a combination of both solutions.
或者，您可能想要尝试iframe { display: block; }或两种解决方案的组合。
回答by Bogdan
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%):
工作实施例中chrome 16.0.*，firefox 10.*： - （如果该高度被设定为99％或一个有源一个不能滚动如果高度为100％或者禁用一个显然IE9作用并显示滚动条无论哪种方式）
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)
将以下内容放在一个 html 文件中并打开它（不知道 jsfiddle 在做什么不同，但它的工作方式不同）
<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"/>
回答by Dave Watts
Not seeing a vertical scroll-bar outsideof jsFiddle with this:
在jsFiddle之外没有看到垂直滚动条：
<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 Elementstabs of what gets selected when I inspect the white-space in Chrome.
编辑：这是我检查 Chrome 中的空白时选择的元素选项卡下的片段。
回答by Poisson
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.
- 之前的空白会导致 iframe 右侧的 4px 空白。
- csuses 后的空白在 iframe 之后使用 4px 的空白。
This is due to the inline character of iframe as pointed out in the first post.
这是由于第一篇文章中指出的 iframe 的内联字符。
回答by poisson
To prevent the scroll bar try this:
为了防止滚动条，试试这个：
CSS:
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:
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.
.bbox 样式可防止子 div 增长。.Vat 是 IE 和 Firefox 所必需的。.vat 的替代方法是：display:block。或 display:inline-block + vertical-alignment:top .brd 用于演示目的。
