css - 使用滚动将填充应用于框,底部填充不起作用

Question

当我在盒子上使用overflow-y:auto时,我无法获得底部填充.

HTML:

<div id="container">
    <div id="some_info"></div>
</div>

CSS:

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

小提琴:http://jsfiddle.net/rwgZu/

编辑:我使用Firefox

Answer 1

没有额外DIV的另一种解决方案.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

在FF,Chrome,IE8-10中工作.

Answer 2

我迟到了,但我认为值得添加一个解决上面提出的一些问题的不同解决方案.

我来到这里是因为@Philip为响应Alexandre Lavoie的解决方案而提出的情况:我在容器内动态生成内容,所以我不能只将样式应用于特定的div名称#some_info.

令人高兴的是,支持CSS3的浏览器有一个简单的解决方案:不是将底部填充应用于容器,而是将底部边距应用于容器内的最后一个子元素.

#container > :last-child {
    margin-bottom: 3em;
}

只要容器div中的最后一个子元素是块级元素,这应该可以解决问题.

演示:http://jsfiddle.net/rwgZu/240/

PS如果Firefox无法滚动到填充的底部确实是一个错误(正如@Kyle所建议的那样),它仍然没有像Firefox 47.0那样修复.令人沮丧!Internet Explorer 11.0.9600.17843表现出相同的行为.(相比之下,谷歌Chrome显示了预期的底部填充.)

Answer 3

上面的解决方案不能满足我的需求，我想我偶然发现了一个简单的解决方案。

如果您的容器和溢出的内容共享相同的背景颜色，您可以添加颜色与背景颜色匹配的顶部和底部边框。要在四周创建相等的填充，请将边框宽度设置为等于容器的左右填充。

链接到 OP 小提琴的修改版本：http : //jsfiddle.net/dennisoneil/rwgZu/508/

下面举个简单的例子。

注意：Stack Overflow 将代码片段结果放入一个溢出滚动中，这使得查看正在发生的事情变得有点困难。小提琴可能是您最好的预览选项。

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}

<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>