Why is my 100vh div bigger than the viewport?

Question

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>

score 0 · Answer 1 · answered Dec 01 '19 at 22:47

0

Add this to avoid the default margin for body and html

html, body {
  margin: 0;
}

answered Dec 01 '19 at 22:47

Johannes

59,058
16
59
114

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

Why is my 100vh div bigger than the viewport?

1 Answers1