“溢出：自动”的奇怪行为在Chrome上 [英] Strange behavior of "overflow: auto" on Chrome

问题描述

我正在开发一个博客部分的网站。我需要这个部分有一个固定的高度。为了能够查看博客中的所有帖子，我添加了一个 overflow：auto ，以便在需要时显示滚动条。

 < div id =container> 
< div id =content> 
< div class =post> 
这是一个很长的帖子.... 
< / div> 
< div class =post> 
这是一个很长的帖子.... 
< / div> 
< div class =post> 
这是一个很长的帖子.... 
< / div> 
 .... 
 .... 
 .... 
 .... 
< / div> 
< / div> 
 
 #container {
 overflow：hidden; 
} 
 
 #content {
 height：200px; 
溢出：auto; 
 border：1px纯红色; 
} 
 
 .post {
 margin：20px 0; 
} 
  

我在Chrome，Firefox和IE上测试了这一点。 Firefox和IE上的网站按预期工作，但Chrome浏览器虽然在帖子列表大于容器时显示滚动条，但会在容器下添加与帖子列表大小相关的白色空白。

我创建了一个小提琴，但是我无法在那里再现Chrome的行为：

http://jsfiddle.net/u5d56/3/

使用溢出：滚动而不是自动提供给我相同的结果。

有什么想法？

解决方案

我找到了解决我的问题的方法。出于某种原因，为了在Chrome中正常工作，我必须将 position：relative 规则添加到 #content ：

  #content {
 position：relative; 
 height：200px; 
溢出：可见; 
 border 1px纯红色; 
} 
  

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: auto so 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.

I created a fiddle but I can't reproduce the Chrome behavior there:

http://jsfiddle.net/u5d56/3/

Using overflow: scroll instead of auto gives me the same results.

Any ideas?

Thanks in advance

解决方案

I found the solution to my problem. For some reason, for this to work in Chrome I had to add a position:relative rule to #content:

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}

这篇关于“溢出：自动”的奇怪行为在Chrome上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！