1

I have a site with an element that is 100vh:

height:100%;  /* for older browsers */
height:100vh;

This works fine on the desktop browsers I tested it in, as well as in Chrome on Android.

But both in Firefox on Android and the default Android web browser, the element is somewhat taller than the browser tab, maybe (eyeballed) as tall as the window plus the tab header.

Why is that so, and how do I avoid it?

  • This might help: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser – Lin Oct 17 '19 at 14:24

1 Answers1

0

100vh is 100% of viewport height and 100vw is 100% of viewport width.

fcastillo
  • 938
  • 1
  • 11
  • 24
  • 1
    Thank you, and actually I now understand what is happening: the default browsers opens the page with the tabs scrolled outside the viewport, and only if I scroll down to sea the "browser chrome" is the page taller than the viewport. At first it has its exact height. And in Firefox on Android this is similar, only that the page opens with the tabs visible and the element too tall, but when I scroll the tabs move up out of the viewport and the element has viewport height. So the reason is different tab behavior in different browsers. In Chrome on Android the status bar remains visible. –  May 10 '15 at 08:08
  • It's good to know because i didn`t know that. I'll keep that in mind for future developments. Thanks – fcastillo May 10 '15 at 08:12