Div 位置固定在 Firefox 上表现不同

Question

我正在努力解决关于 position: fixed 菜单的 Firefox 行为。我制作了一个小提琴https://jsfiddle.net/pwsebppz/ 来重新创建我的部分布局。

我基本上有一个带有position: absolute; padding-bottom: 100px; 的容器和一个带有position: fixed; bottom: 0; height: 75px 的菜单。

在 Chrome 中，菜单尊重容器内边距并留下 100 像素的空白空间，但在 Firefox 中，菜单与内边距重叠。

截图：

火狐 (v 45.0.1)

铬 (v 49.0)

知道为什么会发生这种情况以及如何解决吗？

PS：如果没有必要，我宁愿不更改容器的样式，因为（在我的网站中）它有一个绝对定位的原因

Answer 1

您确定在 Firefox 和 Chrome 上使用相同的 height 窗口来测试它吗？

因为当你有一个较低的height 窗口但在 Chrome 和 Firefox 上时它确实是重叠的。

Fixed 位置和absolute 位置不关心其他元素的填充，因为它们不在流中，所以当窗口大小的高度较低时它重叠是正常的。

编辑：如果你想在两个部分之间保持 100px，试试这个

See this fiddle

我将它与其他 HTML 结构分开：

  <div class="l-app__bottombar">
    <p>
      My footer content
    </p>
  </div>

我删除了fixed 和absolute 位置，并使用margin 而不是padding。