Question

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

<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;
}

我在Chrome，Firefox和IE上测试了这个。 Firefox和IE上的网站按预期工作，但Chrome虽然在帖子列表大于容器时显示滚动条，但在容器下的帖子列表中增加了一个白色间隙。

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

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

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

有什么想法吗？

提前致谢

Answer 1

我找到了解决问题的方法。出于某种原因，要在Chrome中使用此功能，我必须将位置：相对规则添加到 #content ：

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

Answer 2

HTML5应用程序开发基础知识的可能答案

#content{
     height: 200px;
     region-overflow:auto;
     overflow:visible;
     border 1px solid red;
}

现在，这更倾向于响应式设计。在溢出之前添加-webkit-可能会有所帮助，因为它只是一个chrome问题。假设它是CSS3。

#content {
    height: 200px;
    overflow: auto;
    -webkit-overflow: auto;
    border: 1px solid red;
}

＆＃34;溢出的奇怪行为：自动＆＃34;在Chrome上

2 个答案: