setting the width of a `div` to window.innerWidth results in vertical slider
<p>I am trying to create a div boundary that fits snugly inside the entire window (also in <a href="https://jsfiddle.net/4036y3su/" rel="nofollow">JSFiddle</a>):</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script type='text/javascript'&gt;
     function setupDiv() {
       document.getElementById('div')
               .setAttribute('style'
             , 'position: absolute; top: 30px; left: 0px; width: '
             +window.innerWidth +'px; height: '
             +window.innerHeight+'px; border: 1px solid #ff0000');
     }
     window.onload = setupDiv;
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='div'&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Unfortunately the above code results in both horizontal and vertical sliders and only the "north" and "west" border lines are visible. While I can of course reduce the values manually I would like to understand why is that.</p>