html - padding-bottom 在 Firefox 上不显示

Question

当我使用 padding-bottom: 80px 在页面底部预留一个空白区域时，高度为 80px。这适用于 Chrome: 所有图片都是当你滚动到最底部时。

但它在 Firefox 上不起作用:

这个想法是，一旦你到达底部，就会弹出一个底部栏(它现在只是隐藏了 display: 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.