Chrome`position：fixed; bottom：0;`被Android UI遮盖

Question

我在Android Chrome上使用以下代码遇到问题。导航栏掩盖了页面底部的元素。

#test{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: red;
}

台式机Chrome（正确）

Android Chrome：

这里是演示的链接： https://codepen.io/EightArmsHQ/pen/EMNaVg

我知道我可以增加bottom: $amount使其显示，但是在其他浏览器上，该消息将不会与浏览器底部齐平。

关于如何进行这项工作的任何想法？

Answer 1

我尝试了在this articule中建立的解决方案

这是CSS和javascript之间的混合。

首先，在主体本身的容器的css类中，应定义高度属性，如下所示：

height: calc(var(--vh, 1vh) * 100);

vh单位是初始包含块的1％，因此我们可以通过将“自定义单位”乘以100来计算实际视口高度。

现在，自定义单元来自html中的javascript变量。

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`;

在上面的代码中，计算了vh单位，使初始视口大小增加了1％。然后将结果传递到样式表。

然后你去。

该链接提供了更详细的说明，还显示了如何处理屏幕调整大小。

Answer 2

尝试一下：

* {
    padding: 0px;
    margin: 0px;
    Box-sizing: Border-box;
}
    body, html {
    width: 100%;
    height: 100%;

}