I get this WIERD whitespace

Question

I get this WIERD after setting width: 100vw; height: 100vh;. This only happens after setting BOTH width and height to the values above. I tried running it on chrome and edge, the same result. (Funny it works fine if you press "Run code snippet").

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #one {
      width: 100vw;
      height: 100vh;
    }

  </style>
  <title>Document</title>
</head>
<body>
  <div id="one" style="background-color: aqua;">Hello</div>
  <div id="two" style="background-color: gold;">World!</div>
</body>
</html>

is that the white gap on the bottom right corner after the gold div your are referring to? — Stacks Queue, Oct 14 '22 at 03:37

score 1 · Answer 1 · answered Oct 14 '22 at 07:05

If you mean the bottom right corner space. Scrollbar is part of vw So to fix this problem you have two options.

Add the max-width for #one.

 #one {
   width: 100vw;
   height: 100vh;
   max-width:100%;//add this
 }

Just hide the scrollbar.
```
 body{
     overflow: hidden;
 }
```

score 0 · Answer 2 · answered Oct 14 '22 at 07:20

if you look closely. The white gap is exactly the width of the scrollbars..

Scrollbars are included in 100vh.. The easiest way to solve this is to just add

 #one {
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
        }

I think this gets the expected result :)

I get this WIERD whitespace

2 Answers2