Question

我的CSS：

body
{
    margin: 0;
    height: 100%;
}
canvas
{
    background-color: black;
    height: 100%;
    width: 100%;
}
html
{
    height: 100%;
}

如您所见，我的body分别与窗口的可用高度/宽度一样高/宽。我的canvas有100％的高度/宽度，看起来它应该是窗口内部的高度和宽度。但事实并非如此。它高几个像素，并出现一个滚动条。为什么是这样？我可以以某种方式使它工作吗？我不认为canvas有任何填充或任何东西。这在Chrome和Firefox中都会出现。

Answer 1

您还需要：

canvas { display: block; }

因为canvas是一个内联元素，如img。

内联元素在下面有一些“引导”，就像周围文本一样。

Answer 2

~~浏览器可能会变得混乱：使用滚动条，画布太大而不适合。如果没有它们，它就适合。~~

忽略这一点，完全废话。 <canvas>是一个内联元素，因此它遇到与图像相同的问题。添加verical-align:bottom，或者尝试这样做：

canvas {
  background: #000;
  position: fixed;
  left:0; right:0; top:0; bottom:0;
}

帆布太高了

2 个答案: