三星Galaxy S8导航栏覆盖固定位置div

Question

我有这个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等手机上的数字导航栏目前覆盖了固定位置链接;导致链接从底部中途被切断。如何确保固定位置链接仅显示在手机导航栏上方？

Answer 1

您只需计算手机导航栏的高度即可。将高度添加到底部css。就像高度是20px一样，那么你可以在下面添加这个css。

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