100vh results in scroll bar?
<p>I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?</p>

<p>Here is the html file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;style&gt;
    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;&lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>