画布尺寸的奇怪行为

Question

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

这是JSFiddle：

Using the canvas：upper.height=$(document.body).height() - lower.height();

Using a substitute div：upper.height($(document.body).height() - lower.height());

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

非常感谢！

Answer 1

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

Demo Fiddle

canvas{
    display:block
}