Reputation: 1768
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:
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
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
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