铬`位置：固定; bottom: 0;` 被 Android UI 遮挡答案

【问题标题】：Chrome `position:fixed; bottom: 0;` obscured by Android UI铬`位置：固定; bottom: 0;` 被 Android UI 遮挡
【发布时间】：2019-07-26 23:00:33
【问题描述】：

我对 Android Chrome 上的以下代码有疑问。导航栏覆盖了页面底部的元素。

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

桌面 Chrome（正确）

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

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

【问题讨论】：

为什么在 html 和 body 标签中使用相对位置？
@TheDev 可以去掉，不影响position:fixed;
如果你向后滚动/隐藏浏览器工具栏，元素是否会到达它的实际底部位置？
@Justinas no – 无法滚动页面，并且 UI 不会隐藏，即使在点击屏幕的其他部分时也是如此。这可能只是一个错误...我已在 Chrome 应用程序中将其作为反馈提交

【解决方案1】：

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

这是 css 和 javascript 的混合体。

首先在 body 本身容器的 css 类中，您应该像这样定义 height 属性：

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%。然后将结果传递给样式表。

你去吧。

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

【讨论】：

谢谢以利亚，我对此很熟悉。它仍然可以与position: fixed 一起使用吗？另外，你有一个小错字，如果应该是...1vh) * 100);，那么第二个100就没有vh
谢谢 Djave，我已经编辑了答案。我还没有用 position:fixed 测试它，会尝试并让你知道
非常适合我，iPhone Safari 和 Android Chrome。

【解决方案2】：

试试看：

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

}

【讨论】：