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名称，如{{1 }}

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

#some_info

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

DEMO：http://jsfiddle.net/rwgZu/240/

P.S。如果Firefox无法滚动到填充的底部确实是一个错误（正如@Kyle所建议的那样），它仍然没有像Firefox 47.0那样修复。令人沮丧！ Internet Explorer 11.0.9600.17843表现出相同的行为。（相比之下，谷歌浏览器会按预期显示底部填充。）

Answer 3

这是一种可行的完美方法：

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

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

Answer 4

的 Demo 的

你好习惯这个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 }

的 Demo 的

Answer 5

基于isHristov's answer：

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

#container:after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    margin-bottom: 3em; /* length you wanted on padding-bottom */
}

但是，他的解决方案在适当处理这种情况的浏览器中增加了额外的空间。

除非你在#container中有多个动态显示/隐藏的元素，否则

Dan Robinson's answer也很棒。在这种情况下：last-child可能会以隐藏元素为目标而无效。

Answer 6

正常设置父div的样式，并使内部div执行您想要的操作。

删除overflow-x上的overflow和#container，将height更改为100%并在overflow-y:scroll;上添加#some_info

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

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

工作演示：http://jsfiddle.net/9yuohxuh/

Answer 7

上述解决方案无法满足我的需求，我想我偶然发现了一个简单的解决方案。

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

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

下面是一个简单的示例。

注意：堆栈溢出会将代码段结果放入溢出滚动条中，这使得查看情况变得更加困难。小提琴可能是您最好的预览选项。

#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>

Answer 8

您只需将 box-sizing: border-box 添加到您应用 overflow 规则的同一元素中。

Answer 9

这不仅仅是底部填充。右边的填充/边框/间距也被忽略（你的示例中没有看到它，因为它没有内容，宽度不滚动）

以上所有答案都在chrome 43中失败，最多可生成3个滚动条！或者如果内容溢出#some_info。

示例：http://jsfiddle.net/LwujL3ad/

如果它对您有用，可能是因为内容不像滚动元素那么宽，或者是固定大小。

正确的解决方案是：

设置 #some info 以显示：table，并为其添加填充或边框，而不是滚动容器。

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

DEMO：http://jsfiddle.net/juh7802x/

唯一没有失败的元素，并且尊重您在其中添加的任何边框和填充作为分隔符是TABLE。

我尝试了，无论是下一个直接的孩子还是嵌套很多项目，任何非内容样式都不会扩展以包装内容，并且将保持100％的父级宽度。这是无稽之谈，因为内容比父母更大是完全需要滚动div的场景！

对于动态解决方案（容器和内容），设置滚动容器内元素的容器以显示：table。

Answer 10

对于那些正在寻找简单解决方案并且可以更改DOM的用户，请将overflow放在外部元素上，并将padding放在内部元素上。

.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 */
}

请注意此处使用box-sizing: border-box，仅当OP具有硬编码的高度时才需要使用{通常是不好的做法，但在极端情况下可能需要），因此添加此border-box会启用{{ 1}}填充以不增加高度，而是在3em内部填充。

最后一点，我建议避免使用ID进行样式设置，这主要是因为它们具有极高的特异性see this post for more info on that。

Answer 11

我认为@-moz-document url-prefix()是您所需要的。

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

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

@-moz-document url-prefix() {
  #container > :last-child {
    margin-bottom: 3em;
  }
}

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

Answer 12

最重要的答案在 FireFox 89 中不起作用。我能想到的唯一明智的解决方案是使用 div 只包含一个不间断的空间和固定的高度集。

HTML

<div className="spacer">&nbsp;</div>

CSS

.spacer {
    height: 30px;
}

这是有效的，因为它不使用边距或填充。

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

12 个答案: