Chrome `position:fixed; bottom: 0;` obscured by Android UI

Question

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;
}

Desktop Chrome (correct)

Android Chrome:

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

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?

Answer 1

I've tried a solution that I founded in this articule

It's a mix between css and javascript.

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);

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

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`;

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.

And there you go.

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