使用溢出时无填充：自动

Question

当我在盒子上使用 overflow-y: auto 时，我无法使用 padding-bottom 工作。我使用火狐。

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

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

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

请参阅 JSFiddle 。

原文由 Philip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

在 FF、Chrome、IE8-10 中工作。

原文由 isHristov 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 表现出相同的行为。 （相比之下，谷歌浏览器会按预期显示底部填充。）

原文由 Dan Robinson 发布，翻译遵循 CC BY-SA 3.0 许可协议