CSS 使用溢出时无填充：自动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13471910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No padding when using overflow: auto
提问by Philip
I can't get padding-bottomto work when I use overflow-y: autoon a box.
padding-bottom当我overflow-y: auto在盒子上使用时，我无法开始工作。
HTML:
HTML：
<div id="container">
<div id="some_info"></div>
</div>
CSS:
CSS：
#container {
padding: 3em;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
}
#some_info {
height: 900px;
background: #000;
}
EDIT:I use Firefox
编辑：我使用 Firefox
回答by isHristov
One more solution without extra DIVs.
没有额外 DIV 的另一种解决方案。
#container:after {
content: "";
display: block;
height: 50px;
width: 100%;
}
Working in FF, Chrome, IE8-10.
在 FF、Chrome、IE8-10 中工作。
回答by Dan Robinson
I'm late to the party, but I thought it was worth adding a different solution that addresses some of the concerns raised above.
我迟到了，但我认为值得添加一个不同的解决方案来解决上面提出的一些问题。
I came here because of exactly the kind of situation that @Philip raised in response to Alexandre Lavoie's solution: I have dynamically generated content inside the container, so I can't just apply styling to a specific div name like #some_info.
我来到这里是因为@Philip 为响应 Alexandre Lavoie 的解决方案而提出的那种情况：我在容器内动态生成了内容，所以我不能只将样式应用于特定的 div 名称，如#some_info.
Happily, there's a simple solution for browsers that support CSS3: instead of applying bottom padding to the container, apply a bottom margin to the last child element inside the container.
令人高兴的是，对于支持 CSS3 的浏览器，有一个简单的解决方案：不是将底部填充应用于容器，而是将底部边距应用于容器内的最后一个子元素。
#container > :last-child {
margin-bottom: 3em;
}
As long as the last child element in the container div is a block-level element, this should do the trick.
只要容器 div 中的最后一个子元素是块级元素，这应该可以解决问题。
DEMO: http://jsfiddle.net/rwgZu/240/
演示：http: //jsfiddle.net/rwgZu/240/
P.S. If Firefox's failure to scroll to the bottom of the padding is indeed a bug (as suggested by @Kyle), it still hasn't been fixed as of Firefox 47.0. Frustrating! Internet Explorer 11.0.9600.17843 exhibits the same behavior. (Google Chrome, in contrast, shows the bottom padding as expected.)
PS 如果 Firefox 无法滚动到填充底部确实是一个错误（如@Kyle 所建议的那样），那么从 Firefox 47.0 开始，它仍然没有得到修复。令人沮丧！Internet Explorer 11.0.9600.17843 表现出相同的行为。（相比之下，谷歌浏览器按预期显示底部填充。）
回答by Alexandre Lavoie
Here is a possible approach that is working perfectly :
这是一种完美运行的可能方法：
#container {
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
}
#some_info {
height: 900px;
background: #000;
border: 3em solid red;
}
回答by Dennis O'Neil
The solutions above were not working for my needs, and I think I stumbled on a simple solution.
上面的解决方案不能满足我的需求，我想我偶然发现了一个简单的解决方案。
If your container and overflowing content share the same background color, you can add a top and bottom border with the color matching the background color. To create equal padding all around, set the border width equal to the left and right padding of the container.
如果您的容器和溢出的内容共享相同的背景颜色，您可以添加与背景颜色匹配的颜色的顶部和底部边框。要在四周创建相等的填充，请将边框宽度设置为等于容器的左右填充。
Link to modified version of OP's fiddle: http://jsfiddle.net/dennisoneil/rwgZu/508/
链接到 OP 小提琴的修改版本：http: //jsfiddle.net/dennisoneil/rwgZu/508/
A simple example below.
下面举个简单的例子。
Note: Stack Overflow puts the snippet results into an overflow scroll, which makes it a little harder to see what's going on. The fiddle may be your best preview option.
注意：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>回答by Rohit Azad
Hi now used to this css
嗨，现在习惯了这个 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
}
回答by fredrivett
For those who are looking for a simple solution and can change the DOM, put the overflowon the outer element and the paddingon the inner element.
对于那些正在寻找一个简单的解决方案并且可以更改 DOM 的人，将overflow放在外部元素和padding内部元素上。
.scroll {
overflow-x: hidden;
overflow-y: auto;
}
.scroll__inner {
padding: 3em;
}
In the example from the original question, it would look like this:
在原始问题的示例中，它看起来像这样：
#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 */
}
Note the use of box-sizing: border-boxhere, which is only needed as the OP has a hardcoded height (generally bad practice but could be needed in edge cases), so adding this border-boxenables the 3empadding to not increase the height, but pad inside the 900px.
请注意box-sizing: border-box此处的使用，这仅在 OP 具有硬编码高度时才需要（通常是不好的做法，但在边缘情况下可能需要），因此添加它border-box可以使3em填充不会增加高度，而是在900px.
A final note, I'd advise avoiding ID's for styling, mostly due to their extremely high specificity, see this post for more info on that.
最后要注意的是，我建议避免使用 ID 进行样式设计，主要是因为它们具有极高的特异性，请参阅这篇文章了解更多信息。
回答by LGT
Based on 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 */
}
However, his solution adds extra space in browsers that handle this situation properly.
然而，他的解决方案在正确处理这种情况的浏览器中增加了额外的空间。
Dan Robinson's answeris great too unless you have multiple elements, in #container, that are dynamically shown/hidden. In that case :last-child might target a hidden element and have no effect.
Dan Robinson 的回答也很好，除非您在#container 中有多个动态显示/隐藏的元素。在这种情况下， :last-child 可能针对隐藏元素而无效。
回答by Barrett Kuethen
Style the parent div normally and make the inner div do what you want it to do.
正常设置父 div 的样式并使内部 div 做你想要它做的事情。
Remove overflow-xand overflowon #container, change heightto 100%and add overflow-y:scroll;on #some_info
删除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%;
}
Working Demo: http://jsfiddle.net/9yuohxuh/
工作演示：http: //jsfiddle.net/9yuohxuh/
回答by sergio
It's not only with bottom padding. Right padding/border/spacing is also ignored (you can't see it in your example because it has no content, and the width is not scrolling)
它不仅仅是底部填充。右内边距/边框/间距也被忽略（你在你的例子中看不到它，因为它没有内容，而且宽度没有滚动）
All the answers above fail in chrome 43, generating up to 3 scrollbars! or if the content overflows #some_info.
上面的所有答案在 chrome 43 中都失败了，最多生成 3 个滚动条！或者如果内容溢出#some_info。
Example: http://jsfiddle.net/LwujL3ad/
示例：http: //jsfiddle.net/LwujL3ad/
If it worked for you, it's probably because the content was not as wide as the scrolling element, or fixed sized.
如果它对你有用，那可能是因为内容没有滚动元素那么宽，或者固定大小。
The right solution is:
正确的解决办法是：
Set #some infoto display:table, and add padding or border to it, not to the scrolling container.
将#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;
}
DEMO: http://jsfiddle.net/juh7802x/
演示：http: //jsfiddle.net/juh7802x/
The only element that doesn't fail, and respects ANY border and padding you add in there as separator is a TABLE.
唯一不会失败并尊重您在其中添加的任何边框和填充作为分隔符的元素是 TABLE。
I tried, and no matter if it's the next direct child or it's nested many items deep, any non-content styling will NOT expand to wrap the content, and will stay 100% width of the parent. Which is nonsense, because having content BIGGER than the parent is EXACTLY the scenario in which a scrolling div is required!
我试过了，无论它是下一个直接子级还是嵌套了许多项深，任何非内容样式都不会扩展以包装内容，并且将保持父级的 100% 宽度。这是无稽之谈，因为拥有比父级更大的内容正是需要滚动 div 的场景！
For a dynamic solution (both the container and the content) set the container of the elements inside the scrolling container to display:table.
对于动态解决方案（容器和内容），将滚动容器内元素的容器设置为 display:table。
