title: Why is my 100vh div bigger than the viewport?
body: <p>I have a <code>div</code> which is supposed to exactly fill the viewport, using <code>height: 100vh</code> and <code>width: 100%</code>, 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:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;style&gt;
          .box {
              height: 100vh;
              width:100%;
              border: 2px solid blue;
              box-sizing: border-box;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>