Панель навигации Samsung Galaxy S8 перекрывает div с фиксированной позицией

У меня есть этот HTML:

<div class="app-bar">
    <a href="#'>icon</a>
    <a href="#'>icon</a>
    <a href="#'>icon</a>
    <a href="#'>icon</a>
</div>'''

Со следующим CSS:

.app-bar {
     position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
     justify-content: space-between;
}

Этот код отлично работает для меня, но цифровая панель навигации на таких телефонах, как Galaxy S8, в настоящее время перекрывает ссылки с фиксированным положением; в результате чего ссылки обрываются примерно на полпути снизу. Как я могу убедиться, что ссылки с фиксированным положением отображаются только над панелью навигации телефона?


android css ios7
person Blake Bell    schedule 16.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам просто нужно рассчитать высоту навигационной панели телефона. добавьте высоту в нижний css. Например, если высота 20 пикселей, вы можете добавить этот css ниже.

.app-bar {
     position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
     justify-content: space-between;
}

person Kevin    schedule 16.03.2019
comment
Проблема в том, что у каждого устройства есть панель навигации определенной высоты, а у других вообще нет панели навигации, поэтому с этим CSS он поднимет ее на 20 пикселей независимо от того, есть ли на устройстве панель навигации 20 пикселей или нет. Я знаю, что это можно сделать с помощью JS, но я надеялся, что мне не придется идти по этому пути, и я смогу как-то придерживаться CSS. - person Blake Bell; 18.03.2019
comment
Возможно, это невозможно сделать только с помощью CSS. Будем надеяться, что кто-то может ответить на это. - person Kevin; 19.03.2019