community,

I've made a one-screen page and have an issue with depicting it on a smartphone. 100vh is calculated regardless of the Browser UI that takes space on the page, leading it to the situation where I do not have the entire content on the page, and I have ~60 pixels of scroll (to collapse the URL bar).

I tried different methods: dvh, svh and so on. Also, I tried window.innerHeight suggested in the other post,

I tried

function setRealHeight() {
  const realHeight = document.documentElement.clientHeight;
  document.documentElement.style.setProperty('--real-vh', `${realHeight}px`);
}

window.addEventListener('resize', setRealHeight);
setRealHeight();
+ 
body {
  height: var(--real-vh);
}

and const vh = window.visualViewport.height * 0.01;

But nothing helped.

The only band-aid solution I have "invented" - is to increase bottom padding and to hide the overflow - yet I do not feel it is a good solution.