setting the width of a `div` to window.innerWidth results in vertical slider

Question

I am trying to create a div boundary that fits snugly inside the entire window (also in JSFiddle):

<!doctype html>
<html>
  <head>
    <script type='text/javascript'>
     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;
    </script>
  </head>
  <body>
    <div id='div'>
    </div>
  </body>
</html>

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.

It's worth pointing out that CSS has viewport-percentage units (`vh`, `vw`). If the element isn't a root element, then you could add `width: 100vw` or `height: 100vh` to it. See this related answer: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height/25829844#25829844 — Josh Crozier, Jan 12 '16 at 18:27

score 1 · Accepted Answer · edited Jan 12 '16 at 18:40

You can fix that in CSS using box-sizing and setting top to 0px (or adjusting for any non-zero value):

This will make the padding, border and margin factor in to the calculation of the width. As they are, margin, borders and width are not calculated as part of the width:

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

Benedikt D Valdez · Answer 2 · 2016-01-12T18:22:06.313

Solution to your problem (see alternative below)

The problem is your border, is adds to your width, so you have to remove the total border-width from the window.innerWidth, so 1px border means total 2 pixels (one on each side)

Example

<!doctype html>
<html>
  <head>
    <script type='text/javascript'>
     function setupDiv() {
       document.getElementById('div')
               .setAttribute('style'
             , 'position: absolute; top: 0px; left: 0px; width: '
             + (window.innerWidth - 2) +'px; height: '
             + (window.innerHeight - 2) +'px; border: 1px solid #ff0000');
             // Remove 2 px to compensate for the border
     }
     window.onload = setupDiv;
    </script>
  </head>
  <body>
    <div id='div'>
    </div>
  </body>
</html>

Alternative suggestion

One question though, why not just use width: 100% ? Javascript is overkill for this.

Example

<!doctype html>
<html>
  <head>
    <style>
      #div {
        position: absolute;
        top: 0px;
        left: 0px;
  
        width: 100%;
        height: 100%;
  
        border: 1px solid #ff0000;
  
        box-sizing: border-box;
      }  
    </style>
  </head>
  <body>
    <div id='div'>
    </div>
  </body>
</html>

Note that in the alternative suggestion I'm using `box-sizing: border-box;` to tell the browser to include the border and padding in the total width of the element. Theoretically this could be used with the javascript solution as well, but again, javascript is overkill for this.. — Benedikt D Valdez, Jan 12 '16 at 18:26

score 0 · Answer 3 · answered Jan 12 '16 at 18:31

Use box-sizing for the border issue and subtract 30px to window.innerHeight to avoid scrolling

For your markup, use this styles:

* {
 border: 0
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
#div {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

and this JS:

var div = document.getElementById('div');
div.style.height = (window.innerHeight - 30) + "px";

JSFiddle

setting the width of a `div` to window.innerWidth results in vertical slider

3 Answers3

Solution to your problem (see alternative below)

Alternative suggestion