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

Question

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

8.2k Views Asked by PhpDoe At 20 October 2022 at 17:29

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;
}

Original Q&A

There are 2 best solutions below

PhpDoe On 22 October 2022 at 14:33

(The answer comes from the comment section of this question.)

The CSS rule height: 100vh; is making any box filling all the space of the viewport, which is exactly what we are asking to her.

Things become wrong when, on Safari or Chrome browsers for mobile, the browser's address bar is adding an extra space : apparently, this is not a bug but an intentional feature.

To solve this problem, instead of using header { height: 100vh; }, one can use html, html, body, body > header { height: 100%; margin: 0; padding: 0; }.

The box is now filling all the available height and is not adding any extra space : the browser's address bar height is not added to the box.

The CSS rule height: 100%; has to be set for the parents (html and body) and using margin: 0; padding: 0; is necessary, otherwise an extra space will appear.

Here is the CSS updated and corrected :

@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;}

html,
body,
body > header{
  height: 100%;
  margin: 0;
  padding: 0;
}

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

**Richard** · Accepted Answer · 2023-07-12T17:59:42.453000

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. It is well supported in current version browsers (July 2023).

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

There are 2 best solutions below

Related Questions in CSS

Related Questions in MOBILE

Related Questions in VIEWPORT-UNITS

Trending Questions

Popular # Hahtags

Popular Questions