5

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)

enter image description here

Android Chrome:

Android Chrome on Pixel 2

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?

Djave
  • 8,595
  • 8
  • 70
  • 124
  • why are you using relative position in the html and body tag? – TheDev Mar 05 '19 at 13:43
  • 1
    @TheDev you can remove it, it doesn't affect `position:fixed;` – Djave Mar 05 '19 at 15:36
  • And if you scroll back/hide browser toolbar does element gets to it's actual bottom position? – Justinas Mar 05 '19 at 15:41
  • @Justinas no – it is not possible to scroll the page, and the UI won't hide, even when tapping other parts of the screen. It may just be a bug... I've submitted it as feedback within the Chrome App – Djave Mar 05 '19 at 15:43
  • set the bottom to env(safe-area-inset-bottom) instead of 0 – Slim Fadi Aug 18 '22 at 09:57

2 Answers2

2

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.

elijah7
  • 364
  • 3
  • 8
  • 1
    Thanks elijah, I'm familiar with this. Does it still work with `position: fixed` though? Also, you have a little typo, if should be `...1vh) * 100);` so no `vh` on the second `100` – Djave Jun 08 '20 at 10:03
  • Thanks Djave, I've edited the answer. I haven't tested it with position: fixed, will try it and let you know – elijah7 Jun 12 '20 at 14:19
  • Works well for me, iPhone Safari and Android Chrome. – Kalnode Dec 11 '21 at 02:04
-1

Try it:

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

}
TheDev
  • 407
  • 2
  • 12
  • This does not change anything. `position: fixed;` doesn't care about the body or html padding :( – Djave Mar 06 '19 at 12:29