Div位置固定在Firefox上的行为不同 [英] Div position fixed behaves different on firefox

问题描述

我遇到一个Firefox的行为有关 position：fixed 菜单。我做了一个小调
Firefox （v 45.0.1）

< img src =https://i.stack.imgur.com/byxsC.pngalt =Chrome>
Chrome（v 49.0）

任何想法为什么这是发生&如何解决呢？

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

解决方案

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

因为当你有一个较低的高度的窗口，但是在Chrome和Firefox。 p>

固定位置和绝对位置不在乎填充

EDIT >：如果您想在两个部分之间保持100像素，请尝试此操作

查看此小提示

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

 < div class =l-app__bottombar> 
< p> 
我的页脚内容
< / p> 
< / div> 
  

我移除了固定和 c>。 c> c>


I'm struggling with a Firefox behaviour regarding a position: fixed menu. I've made a fiddle https://jsfiddle.net/pwsebppz/ to recreate part of my layout.

I basically have a container with position: absolute; padding-bottom: 100px; and a menu with position: fixed; bottom: 0; height: 75px.

In Chrome, the menu respects the container padding and leaves a blank space of 100px, but in Firefox, the menu is overlapping the padding.

Screenshots:

Firefox (v 45.0.1)

Chrome (v 49.0)

Any idea why this is happening & how to solve it?

PS: I'd rather not change the styles of the container if not necessary because (in my website) it has a reason why is absoluted positioned

解决方案

Are you sure you use the same height of window to test it on Firefox and Chrome?

Because it is indeed overlapping when you have a lower height of window but both on Chrome and Firefox.

Fixed position and absolute position doesn't care about padding of other elements because they are not in the flow, so it's normal that it is overlapping when you have a lower height of window size.

EDIT : If you wants to keep 100px between the two parts, try this instead

See this fiddle

I separate this from the other HTML structure :

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

I removed fixed and absolute positions and did a margin instead of a padding.

这篇关于Div位置固定在Firefox上的行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！