Firefox 在使用溢出时忽略填充：滚动

Posted 2023-03-06

【中文标题】Firefox 在使用溢出时忽略填充：滚动

【英文标题】：Firefox ignores padding when using overflow:scroll

【发布时间】：2015-07-11 06:59:51

【问题描述】：

当使用overflow: scroll 结合padding: /* ... */ CSS 属性时，Firefox 中缺少元素底部的填充。 （但适用于 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>

View Demo

我是否遗漏了什么，或者有什么办法可以解决这个问题？

---

注意：该演示没有使用任何库进行规范化，但我也尝试了normalize.css，但没有成功。

【问题讨论】：

W3C 必须解决这个问题，希望他们会选择 Chrome 的行为！ github.com/w3c/csswg-drafts/issues/129

这个bug似乎在最新的Firefox（目前是v89）中得到了解决

【参考方案1】：

经过与其他开发人员的头脑风暴，虽然不是很优雅，但这个纯 css 解决方案是可行的：

.container:after 
    content: "";
    height: 50px;
    display: block;

Fiddle

【讨论】：

这对我有用，天才！您还可以设置一个“安全”不透明度：0 只是为了确定。

这对我有用，但需要width: 100% 才能工作。

对我来说效果很好。请注意，如果父 .container 具有 display: flex;，则您可能需要将 flex-shrink: 0 添加到此 ::after 伪元素，以免它缩小为虚无。

【参考方案2】：

在 Firefox padding-bottom 中忽略溢出：自动或 溢出：滚动，查看文档

https://bugzilla.mozilla.org/show_bug.cgi?id=748518

如果您想解决您的示例以实现所需的结果，请查看小提琴：https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/

修改后的 CSS

.container 
    height: 200px;
    padding: 50px 50px 0;
    border: solid 1px red;
    overflow-y:auto;
    display:block;

ul
    padding:0 0 50px;
    display:block

li 
    padding: 0;
    margin: 0;

【讨论】：

感谢您提供指向他们的错误跟踪器的链接。遗憾的是普通浏览器处理方式不同。但是我想我需要忍受。

感谢您的解释 - 真的很有帮助。我使用 :last-child 和 margin 发布了另一种解决方法，我觉得这很有用。

【参考方案3】：

我不喜欢创建额外的 DOM 元素来解决显示问题，但它似乎有助于将元素拆分为两个元素，例如：

<div class="container">
    <div class="container-inner">
        <!-- long content -->
    </div>
</div>

然后将overflow: scroll分配给外部元素，并将padding: /* ... */添加到内部元素。

【讨论】：

这还是同样的问题。

在 Firefox 66 中添加带填充的内部 div 对我有用。

【参考方案4】：

我最终以稍微不同的方式实现了相同的效果（可滚动容器中的最后一项与容器末尾之间的空间）：

.container :last-child 
    margin-bottom: 50px;

也许实际发生的事情之间存在技术差异，但我觉得这非常有效。

这是Fiddle

【参考方案5】：

您可以针对 Firefox 浏览器并为正在滚动的元素添加额外的边距：

@supports (-moz-appearance:none) 

  ul 
    margin-bottom: 50px;
  

来自MDN：

@supports CSS at-rule 允许您指定依赖于浏览器对一项或多项特定 CSS 功能的支持的声明。

通过请求对 Firefox 特定规则的支持，您实际上是针对 Firefox 浏览器。

【参考方案6】：

我认为@-moz-document url-prefix()是可行的解决方案。

.container 
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;


ul,
li 
  padding: 0;
  margin: 0;


@-moz-document url-prefix() 
  .container > :last-child 
    margin-bottom: 50px;
  

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

【参考方案7】：

您不能在所有情况下都使用 Arthurion 的答案，例如跟随 input 或 img 元素。您可以改为创建一个间隔元素，例如 div，并将其放在滚动内容的末尾：

.spacer-1rem 
    content: "";
    height: 1rem;
    display: block;

【参考方案8】：

虽然对我有用的方法与其他建议的答案相似，但这些其他答案对我不起作用。

以下是起作用的：

.container::after 
    content: '';
    display: block;
    padding: calc(var(--desiredPadding) / 2);

意思是：

对我来说，有必要在伪元素上使用padding。使用padding-bottom 无效，height 也无效 因此，我需要将填充除以 2 必须指定display: block

【参考方案9】：

好吧，我更改了颜色透明边框的填充。由于我使用box-sizing: border box，因此不会误导宽度和高度问题