[SOLVED] Why is the CSS height:100vh; rule exceeding the viewport height on mobile devices?

Why is the CSS height:100vh; rule exceeding the viewport height on mobile devices?

In order to make my header fit with all the viewports, I'm using the classic CSS rule height: 100vh; and it works like a charm… except on my mobile.

Actually, on the bottom of the screen the header is taller than the viewport (20px or 30px more than it should do). Because of this issue, some of the content at the bottom of the header is the hidden on mobile devices.

I've tried to fix the bug with the Chrome DevTools Console, but everything is fine when I'm using the mobile view (with all the devices).

It seems the issue comes from the browser's address bar on my mobile (I'm using Chrome).

What am I missing ? How to fix it properly ?

Here you have the html :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>Lorem ipsum</header>
    <main>
      <p>Lorem ipsum</p>
    </main>
  </body>
</html>

And here the CSS :

@charset "UTF-8";

/** RESET CSS **/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}

*{margin:0;padding:0;border:0;list-style:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

header{
  height: 100vh;
  background: green;
  font-size: 22px;
}

Solution

Instead of using vh units try CSS rule height: 100dvh this is dynamic viewport height and the size will be automatically adjusted in response to the mobile browsers UI state i.e. if the browser address bar is visible or not.

As of January 2025, it is supported by 90.57% of users worldwide, according to caniuse.com.