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%加2px border-top / border-bottom = 100% + 4px！= 100% - 因此滚动条出现。

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

border-box：width和height属性包括填充和边框，但不包括边距。这是当文档处于Quirks模式时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;
}

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

1 个答案: