使用溢出时无填充: auto

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

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

83222 次浏览
小开

这里有一个可能的方法，它非常有效:

#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个滚动条! 或者如果内容溢出 # 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。

小开

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

我之所以来到这里，正是因为@Philip 对 Alexandre Lavoie 的解决方案所提出的那种情况: 我在容器内动态生成了内容，所以我不能只对特定的 div 名称(如 #some_info)应用样式。

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

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

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

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

附言。如果 Firefox 没有滚动到填充的底部确实是一个 bug (如@Kyle 所建议的) ，那么到 Firefox 47.0时它还没有被修复。真令人沮丧！Internet Explorer 11.0.9600.17843表现出同样的行为。(相比之下，谷歌 Chrome 显示的底部填充符合预期。)

小开

基于 这是赫里斯托夫的回答:

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

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

Dan Robinson 的回答 也很棒，除非在 # Container 中有多个动态显示/隐藏的元素。在这种情况下: last-child 可能以隐藏元素为目标，并且没有效果。

小开

正常设置父 div 的样式，并使内部 div 按照您的要求执行。

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

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


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

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

小开

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

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

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

小开

对于那些正在寻找一个简单的解决方案并且可以更改 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 来设计风格，主要是因为它们具有极高的特异性，即 更多相关信息请看这篇文章。

小开

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

小开

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

小开

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

超文本标示语言

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

CSS

.spacer {
height: 30px;
}

这是因为它没有利用边距或填充。

小开

我刚刚面对过这个问题，它甚至在2021年发布的 Firefox 87版本中仍然存在。

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


提交答案