Css 使用溢出时无填充：自动

当我在盒子上使用

overflow-y:auto

时，我无法让

填充底部

工作

HTML:

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

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

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

---

编辑：我使用Firefox

这里有一种可能的方法可以完美地工作：

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}

嗨，现在习惯这个css了

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

---

无需额外div，只需再提供一个解决方案

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

---

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

它不仅具有底部填充。右侧填充/边框/间距也被忽略（您在示例中看不到它，因为它没有内容，并且宽度没有滚动）

以上所有答案在chrome 43中均失败，最多生成3个滚动条！或者如果内容溢出#一些信息

例如：

如果它对您有效，可能是因为内容没有滚动元素宽，或者大小固定

正确的解决方案是：

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

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

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

设置#一些信息以显示：表格，并向其添加填充或边框，而不是向滚动容器添加填充或边框

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

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

演示：

唯一没有失败的元素是一个表，它尊重作为分隔符添加的任何边框和填充

我试过了，不管它是下一个直接子项还是嵌套了很多项，任何非内容样式都不会展开以包装内容，而是保持父项的100%宽度。这是胡说八道，因为内容大于父级正是需要滚动div的场景

---

对于动态解决方案（包括容器和内容），将滚动容器中元素的容器设置为display:table。

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

我来到这里，正是因为@Philip在回应Alexandre Lavoie的解决方案时提出的那种情况：我在容器中动态生成了内容，所以我不能只将样式应用于特定的div名称，比如

\some\u info

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

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

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

只要container div中的最后一个子元素是块级元素，就应该可以了

演示：

另外，如果Firefox未能滚动到填充的底部确实是一个bug（正如@Kyle所建议的），那么到Firefox 47.0为止，它仍然没有被修复。令人沮丧的！Internet Explorer 11.0.9600.17843表现出相同的行为。（相比之下，Google Chrome显示了预期的底部填充物。）

基于：

然而，他的解决方案在浏览器中增加了额外的空间，可以正确处理这种情况

---

除非在#容器中有多个动态显示/隐藏的元素，否则也很好。在这种情况下：最后一个子元素可能以隐藏元素为目标，没有任何效果。

正常设置父div的样式，并使内部div执行您希望它执行的操作

移除

容器上的
溢出x
和
溢出
，将
高度
更改为
100%
并添加
溢出y：滚动关于
#一些信息

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

工作演示：
上面的解决方案不适合我的需要，我想我偶然发现了一个简单的解决方案

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

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

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

链接到OP小提琴的修改版本：

下面是一个简单的例子

注意：堆栈溢出将代码段结果放入溢出滚动中，这使得查看发生了什么变得有点困难。小提琴可能是你最好的预览选项


#容器{
背景：#ccc；
溢出y：滚动；
高度：190px；
填充：0 20px；
边框顶部：20px实心#ccc；
边框底部：20px实心#ccc；
}
#溢出{
背景：#ccc；
}

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

这是内容

对于那些正在寻找简单解决方案并可以更改DOM的人，将
溢出
放在外部元素上，将
填充
放在内部元素上

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll__inner {
    padding: 3em;
}

在原始问题的示例中，它如下所示：

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

#some_info {
    height: 900px;
    background: #000;
    padding: 3em;
    box-sizing: border-box; /* only needed if wanting padding to not be added to height */
}

请注意此处使用的
框大小：边框框
，这仅在OP具有硬编码高度时才需要（通常不好的做法，但在边缘情况下可能需要），因此添加此
边框框
可使
3em
填充不增加高度，而是在
900px
内填充

最后一点，我建议避免使用ID进行样式设置，这主要是因为它们具有极高的特异性。
我认为
@-moz document url-prefix（）
是您需要的


#容器{
填充：3em；
溢出x：隐藏；
溢出y：自动；
宽度：300px；
高度：300px；
背景：红色；
}
#一些信息{
高度：900px；
背景：#000；
}
@-moz文档url-前缀（）{
#容器>：最后一个子容器{
边缘底部：3em；
}
}

您只需将
框大小：边框框
添加到应用
溢出
规则的同一元素中。
我看到所有边缘都有填充（红色）。啊哈，可能只是Firefox？这是您告诉它的工作方式。您是否期望得到不同的结果？我确认FF17W3C中的问题必须解决此问题，希望如此