Search code examples
htmlcssmobile

How to position bottom of an element relative to browser buttons panel on Mobile devices?

The floating button in the website is hidden behind the browser buttons panel. Is there a way to position the element with respect to the browser's buttons panel on Mobile devices?

enter image description here

I tried adding env(safe-area-inset-bottom) as suggester here. I also tried adding position: static to body as suggested in the same thread. I also tried various other solutions from google and StackOverflow but doesn't seem to work.

Solution

  • Finally solved by using dvh -> dynamic viewport height.

    Old CSS

    .floating {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

    Fixed with following

    .floating {
  position: fixed;
  right: 30px;
  height: 60px;
  bottom: calc(100dvh - 90px);
}