0

I have a div which is supposed to exactly fill the viewport, using height: 100vh and width: 100%, but (in Chrome and Safari at least), is slightly larger, so that scroll bars are generated. Why is this and how do I get the div I want? Example code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
        .box {
            height: 100vh;
            width:100%;
            border: 2px solid blue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Nigel
  • 585
  • 1
  • 5
  • 20
  • Just wanted to note that the alternative question suggested does NOT have the answer for this question. It says how much extra space is added on body by default, but that isn't what this person was asking. They were asking why 100vh was bigger than the visible vh, and how they can get the correct size for the div. – Lisa Jul 08 '22 at 05:15

1 Answers1

0

Add this to avoid the default margin for body and html

html, body {
  margin: 0;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I don't think you need to remove html margins, though, just the body. The width worked because it asked for 100% of available space - which is less then 100vw because of the body's margin. You might be interested in checking out css resetting and normalizing. – isacvale Dec 02 '19 at 00:05