当高度/宽度设置为100％时，元素几乎不突出

Question

当我将高度和宽度（例如canvas）设置为100％而不是展开以填充屏幕时，它只会扩展到屏幕上方几乎不会出现滚动条，即使将top和left设置为0em，我也可以向上/向下滚动几个像素。

这是有原因吗？除了将高度和宽度设置为98％而不是100％之外，还有其他解决方法吗？

我使用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; 
} 
... 

Answer 1

这是因为border的。

的100%加2pxborder-top/border-bottom高度= 100% + 4px = 100% - ！由此出现的滚动条。

您可以使用box-sizing: border-box在元素的宽度计算中包含边框。

border-box：宽度和高度属性包括填充和边框，但不包括边距。这是Internet Explorer在文件处于怪癖模式时使用的盒子模型。

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; 
}