padding-bottom 在 Firefox 上不显示

Question

当我使用 padding-bottom: 80px 在页面底部保留空白 space 时，高度为 80px。此 适用于 Chrome：所有图片都是当你滚动到最底部时。

但它在 Firefox 上不起作用：

这个想法是，一旦你到达底部，就会弹出一个底部栏（它现在只是隐藏了显示：none;）。这是 在 Chrome 上的正确渲染：

但它在 Firefox 上不起作用，并且底部出现以隐藏页面底部（尽管有填充！）

知道为什么会这样吗？当我没有底栏滑动（即只是呈现）时，它呈现不正确，因为在 Firefox 中会隐藏带有底栏的网页底部。

更新一些相关的CSS：

.submissions-wrapper {
  overflow: scroll;
  padding-bottom: 80px;
  //border-bottom: 80px solid rgb(255, 255, 255);
}

.submission-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 298;
  padding: 10px 30px;

  background-color: #2a3333;
  border-top: 1px solid #0b0e10;

  .inverted-button,
  .flat-button {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px 60px;
  }

  display: none;
  //visibility: hidden;
}

Answer 1

因为我在 Rails，所以我使用 Browser Gem 来检测浏览器（服务器端）。然后我为有问题的浏览器添加一个空的div。在处理 css 2 小时后，此解决方案在 30 秒内有效，因此如果您正在寻找快速修复，建议使用此解决方案。可能不是最有效或最优雅的。

示例代码（检查后可能会添加其他浏览器）：

- if browser.firefox?
  .submission-bar-clone style="height: 80px"

.submission-bottom-bar.clearfix 
  / render the regular bar.

padding-bottom 在 Firefox 上不显示

padding-bottom not showing up on Firefox

html

css

firefox

google-chrome