Chrome`position:fixed; bottom:0;`被Android UI遮盖 [英] Chrome `position:fixed; bottom: 0;` obscured by Android UI

问题描述

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

I have an issue with the following code on Android Chrome. The navigation bars are covering up the element at the bottom of the page.

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

台式机Chrome(正确)

以下是该演示的链接: https://codepen.io/EightArmsHQ/pen/EMNaVg

Here is a link to the demo: https://codepen.io/EightArmsHQ/pen/EMNaVg

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

I know that I can increase the bottom: $amount to make it show, but then on other browsers the message won't be flush with the bottom of the browser.

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

Any ideas on how to make this work?

推荐答案

我尝试了在这是CSS和javascript之间的混合.

It's a mix between css and javascript.

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

First in the css class of the container of the body itself you should define the height property like this:

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

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

The vh unit is 1% of the initial containing block, so we can calculate the actual viewport height multiplying our "custom unit" by 100.

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

Now, the custom unit comes from a javascript variable in the html.

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

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

In the code above the vh unit is calculated getting the initial viewport size by 1% of it. Then the result is passed to the stylesheet.

然后你去.

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

The link offers a more detailed explanation and it also show how to handle screen resizing.

这篇关于Chrome`position:fixed; bottom:0;`被Android UI遮盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！