Question

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

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

在Chrome中，菜单会考虑容器填充并留下100px的空白，但在Firefox中，菜单与填充重叠。

截图：

Firefox（v 45.0.1）

Chrome（第49.0节）

知道为什么会发生这种情况＆amp;怎么解决？

PS：如果没有必要，我宁愿不改变容器的样式，因为（在我的网站上）它有一个理由为什么是绝对定位

Answer 1

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

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

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

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

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

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

我删除了fixed和absolute个位置并执行了margin而不是padding。