更新时间:2023-09-18 21:15:34
我找到了解决我的问题的方法。出于某种原因,为了在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:
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;
}