Html Chrome 上“溢出：自动”的奇怪行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22898335/
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
Strange behavior of "overflow: auto" on Chrome
提问by leemon
I'm developing a site with a blog section. I need this section to have a fixed height. In order to be able to see all the posts in the blog I added an overflow: autoso it shows a scrollbar when needed.
我正在开发一个带有博客部分的网站。我需要这个部分有一个固定的高度。为了能够看到博客中的所有帖子，我添加了一个溢出：自动以便在需要时显示滚动条。
<div id="container">
<div id="content">
<div class="post">
This is a long post....
</div>
<div class="post">
This is a long post....
</div>
<div class="post">
This is a long post....
</div>
....
....
....
....
</div>
</div>
#container {
overflow: hidden;
}
#content {
height: 200px;
overflow: auto;
border: 1px solid red;
}
.post {
margin: 20px 0;
}
I tested this on Chrome, Firefox and IE. The site on Firefox and IE works as expected, but Chrome, although it shows a scrollbar when the list of posts is bigger than the container, adds a white gap the size of the list of posts under the container.
我在 Chrome、Firefox 和 IE 上对此进行了测试。Firefox 和 IE 上的站点按预期工作，但 Chrome 虽然在帖子列表大于容器时显示滚动条，但会在容器下添加一个与帖子列表大小相同的白色间隙。
I created a fiddle but I can't reproduce the Chrome behavior there:
我创建了一个小提琴，但我无法在那里重现 Chrome 的行为：
Using overflow: scrollinstead of auto gives me the same results.
使用溢出：滚动而不是自动给我相同的结果。
Any ideas?
有任何想法吗？
Thanks in advance
提前致谢
回答by leemon
I found the solution to my problem. For some reason, for this to work in Chrome I had to add a position:relativerule to #content:
我找到了解决我的问题的方法。出于某种原因，为了在 Chrome 中工作，我必须向#content添加一个position:relative规则：
#content{
position: relative;
height: 200px;
overflow:visible;
border 1px solid red;
}
回答by reinhoc
A possible answer from HTML5 Application Development Fundamentals
HTML5 应用程序开发基础的可能答案
#content{
height: 200px;
region-overflow:auto;
overflow:visible;
border 1px solid red;
}
Now this is gearing more towards responsive design. Add -webkit- before overflow might help since it is a chrome issue only. Assuming it is CSS3.
现在这更倾向于响应式设计。在溢出之前添加 -webkit- 可能会有所帮助，因为它只是一个 chrome 问题。假设它是CSS3。
#content {
height: 200px;
overflow: auto;
-webkit-overflow: auto;
border: 1px solid red;
}
