when height/width is set to 100%, the element sticks out just barely

When I set the height and width of, say, a canvas to 100%, instead of expanding to fill the screen, it expands past the screen just barely so that a scroll bar appears and I can scroll up/down left/right a few pixels even when I set top and left to 0em.

Is there some reason for this? And is there a way to fix this other than setting the height and width, to, say, 98% instead of 100%?

I am using Chrome 36.0.1985.143

HTML:

<canvas id="canvas"></canvas>

CSS:

canvas {
  border: 2px solid red;
  background-color: yellow;
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0em;
  left: 0em;
}

solution

It’s because of the border.

A height of 100% plus 2px border-top/border-bottom = 100% + 4px != 100% - thus the scrollbar appears.

You could use box-sizing: border-box to include the border in the element’s width calculation.

border-box: The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.

Example Here

canvas {
  border: 2px solid red;
  background-color: yellow;
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0em;
  left: 0em;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}