画布尺寸的奇怪行为

Question

所以，我对当前的问题感到困惑，幸好很容易向你们展示。

这是JSFiddle：

使用画布 ： upper.height=$(document.body).height() - lower.height();

使用替换div ： upper.height($(document.body).height() - lower.height());

正如您所看到的，由于某种原因，在画布之后放置了几个像素的小边距。 它最终会创建一个滚动条，因为它比它试图填充的视口高4像素。 为什么是这样？ 我设定margin:0; 和padding:0; 对于所有元素。

非常感谢！

Answer 1

您需要将canvas设置为块元素（默认情况下div是块级别），默认情况下它是内联的，这就是您看到行为变化的原因：

演示小提琴

canvas{
    display:block
}