CODEWITHSUNDEEP
htmlcssfirefoxlayout
ithil
ithil

Reputation: 1768

Div position fixed behaves different on firefox

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 Firefox (v 45.0.1)

Chrome 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

Upvotes: 0

Views: 1124

Answers (1)

Nutshell
Nutshell

Reputation: 8537

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.

Upvotes: 1

Related Questions