android - 三星 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;
}