Позиция Div фиксированная ведет себя по-другому на firefox

Question

Я борюсь с поведением Firefox относительно меню position: fixed. Я сделал скрипку https://jsfiddle.net/pwsebppz/, чтобы воссоздать часть моего макета.

У меня в основном есть контейнер с position: absolute; padding-bottom: 100px; и меню с position: fixed; bottom: 0; height: 75px.

В Chrome меню соответствует заполнению контейнера и оставляет пустое пространство 100 пикселей, но в Firefox меню перекрывает отступы.

Скриншоты:

Firefox (v 45.0.1)

Chrome (49,0)

Любая идея, почему это происходит &, как ее решить?

PS: Я бы предпочел не менять стили контейнера, если нет необходимости, потому что (в моем веб-сайте) это есть причина почему absoluted позиционируется

Answer 1

Вы уверены, что вы используете один и тот же height окна, чтобы проверить это на Firefox и Chrome?

Потому что это действительно перекрытие, когда у вас есть нижнее окно height, но как в Chrome, так и в Firefox.

Fixed position и absolute Позиция не заботится о дополнении других элементов, потому что они не находятся в потоке, поэтому это нормально, если накладывается меньшая высота окна.

EDIT: Если хочет сохранить 100px между этими двумя частями, попробуйте это вместо

See this fiddle

Я отделить это от другой HTML структуры:

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

Я удалил fixed и absolute позиций и сделал margin вместо padding.