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