Android 三星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>'''

---

这段代码对我来说非常有用，但Galaxy S8等手机上的数字导航栏目前覆盖着固定位置链接；导致链接从底部的一半左右被切断。如何确保固定位置链接仅显示在手机导航栏上方？

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

.appbar{
位置：固定；
左：0；
右：0；
底部：20px；
显示器：flex；
证明内容：之间的空间；
}

问题在于，每个设备都有一个特定高度的导航栏，而其他设备根本没有导航栏，因此，使用此CSS，无论设备是否有20px的导航栏，它都会将其提升20px。我知道这可以用JS来完成，但我希望我不必走这条路，可以坚持使用CSS。也许这不能只用CSS来完成。希望有人能回答这个问题。

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