68

当我在盒子上使用时，我无法padding-bottom上班。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;
}

小提琴。

编辑：我使用火狐

4

13 回答 13

66

无需额外 DIV 的另一种解决方案。

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

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

于 2014-02-26T11:47:32.710 回答
18

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

我来到这里正是因为@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 表现出相同的行为。（相比之下，谷歌浏览器按预期显示底部填充。）

于 2016-07-04T05:47:26.430 回答
7

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

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

链接到 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>

于 2018-08-14T15:37:19.697 回答
4

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

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

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}
于 2012-11-20T11:13:16.903 回答
2

正常样式父 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/

于 2016-08-30T00:21:11.790 回答
2

对于那些正在寻找一个简单的解决方案并且可以更改 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可以使3em填充不会增加高度，而是在900px.

最后一点，我建议避免使用 ID 进行样式设置，主要是因为它们具有极高的特异性，请参阅这篇文章以获取更多信息。

于 2019-11-12T12:05:25.597 回答
1

演示

嗨，现在习惯了这个 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
}

演示

于 2012-11-20T11:16:25.253 回答
1

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

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

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

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

正确的解决方案是：

将#some info设置为 display: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;
}

演示：http: //jsfiddle.net/juh7802x/

唯一不会失败并尊重您添加的任何边框和填充作为分隔符的元素是 TABLE。

我试过了，无论它是下一个直接子级还是嵌套了许多项，任何非内容样式都不会扩展以包裹内容，并且会保持父级的 100% 宽度。这是胡说八道，因为内容比父级大正是需要滚动 div 的场景！

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

于 2015-07-04T21:14:26.223 回答
1

基于isHristov 的回答：

#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 的回答也很棒。在这种情况下 :last-child 可能会针对隐藏元素而没有效果。

于 2016-08-28T11:37:55.227 回答
0

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

HTML

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

CSS

.spacer {
    height: 30px;
}

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

于 2021-06-30T23:31:31.077 回答
0

我认为@-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>

于 2020-08-06T05:20:51.417 回答
0

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

于 2021-04-06T11:13:06.830 回答
0

我刚刚遇到这个问题，即使在 2021 年发布的 Firefox 87 版本中也存在。

但它终于在最近得到修复。更新到 Firefox 93 后，带有滚动的底部填充正常工作。

于 2021-10-19T20:55:59.013 回答