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.