I get this WIERD whitespace-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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