Навигационната лента на Samsung Galaxy S8 наслагва div с фиксирана позиция

Имам този HTML:

<div class="app-bar">
    <a href="/bg#'>icon</a>
    <a href="/bg#'>icon</a>
    <a href="/bg#'>icon</a>
    <a href="/bg#'>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. Например, ако височината е 20px, тогава можете да добавите този 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