css - 画布太高

Question

我的 CSS：

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

如您所见，mybody分别与窗口的可用高度/宽度一样高/宽。我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;
}