Firefox在使用overflow:scroll时忽略填充
Firefox在使用overflow:scroll时忽略填充
提问于 2015-05-01 20:38:01
当将overflow: scroll与Firefox属性结合使用时，在padding: /* ... */中缺少元素底部的填充。(但适用于Chrome和Safari。)
.container {
height: 100px;
padding: 50px;
border: solid 1px red;
overflow-y: scroll;
}
ul,
li {
padding: 0;
margin: 0;
}<div class="container">
<ul>
<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>
</ul>
</div>
我是不是漏掉了什么，或者有没有解决这个问题的办法？
注意:该演示没有使用任何库进行标准化，但我也尝试了normalize.css，但没有成功。
回答 6
Stack Overflow用户
发布于 2016-02-15 23:55:10
在与其他开发人员进行了一些头脑风暴之后，尽管不是很优雅，但这个纯css解决方案可以工作：
.container:after {
content: "";
height: 50px;
display: block;
}Stack Overflow用户
发布于 2015-05-01 21:17:38
我不喜欢创建额外的DOM元素来解决显示问题，但是将元素拆分为两个元素似乎会有所帮助，例如：
<div class="container">
<div class="container-inner">
<!-- long content -->
</div>
</div>然后将overflow: scroll赋值给外部元素，并将padding: /* ... */添加到内部元素。
Stack Overflow用户
发布于 2016-09-16 20:19:31
我最终以一种略微不同的方式实现了相同的效果(可滚动容器中最后一项与容器末尾之间的空间)：
.container :last-child {
margin-bottom: 50px;
}也许在实际发生的事情之间存在技术差异，但我发现这很有效。
这是一个Fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29986977
复制相关文章
相似问题