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

Asked 20/10, 2022 at 17:29 Answered 12/7, 2023 at 17:59

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

Alfieri answered 20/10, 2022 at 17:29 Comment(6)

Add css html, body { margin: 0; } – Paunchy 20/10, 2022 at 17:47

I added it, but it doesn't change anything (and inside the RESET you already have this rule * { margin: 0; } ). – Alfieri 20/10, 2022 at 18:28

The specificity (the priority) of * is less then a normal tag such as <body> so if a browser defaults to a certain margin, the * will not reset this. If you set the header to 100vh then the main section will sit below the header. – Paunchy 21/10, 2022 at 6:12

Ok, I dit it but it doesn't change anything. I think the issue comes from the Chrome browser's address bar. – Alfieri 21/10, 2022 at 7:37

Full screen API might be relevant? – Risinger 21/10, 2022 at 7:59

As an alternative html, body, body > header { height: 100%; margin: 0; } because 100vh is a calculated absolute value and 100% looks at the space that is available. – Paunchy 21/10, 2022 at 21:20

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).

Burgenland answered 12/7, 2023 at 17:59 Comment(0)

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

Alfieri answered 22/10, 2022 at 14:33 Comment(0)

Recommended topics

Hot tags