Firefox 在使用 overflow:scroll 时忽略填充

Question

当结合使用 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，但没有成功。

Answer 1

in Firefox padding-bottom is ignored with overflow:auto or overflow:scroll, see the documentation

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

如果您想解决您的示例以获得所需的结果，请参阅 fiddle：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;
}

Answer 2

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

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

然后将overflow: scroll赋给外层元素，将padding: /* ... */赋值给内层元素。

Answer 3

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

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

Fiddle

Answer 4

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

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

也许真正发生的事情之间存在技术差异，但我发现这非常有效。

这是一个Fiddle

Answer 5

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

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

Answer 6

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

以下是起作用的：

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

这意味着：

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

Answer 7

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

@supports (-moz-appearance:none) {

  ul {
    margin-bottom: 50px;
  }
}

来自MDN：

The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features.

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

Answer 8

好吧，我将填充更改为颜色透明的边框。因为我用的是box-sizing: border box所以不会误导宽高问题

Answer 9

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

Firefox 在使用 overflow:scroll 时忽略填充

Firefox ignores padding when using overflow:scroll

css

firefox

Fiddle