Chrome`位置：固定; 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

试试吧：

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

}