画布尺寸的奇怪行为

Question

So, I'm confused about a current problem, which thankfully is easy to demonstrate to you guys.

Here it is on JSFiddle:

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

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

As you can see, a small margin of a few pixels is placed after the canvas for some reason. It ends up creating a scrollbar, since it becomes 4 pixels taller than the viewport it's trying to fill. Why is this? I've set margin:0; and padding:0; for all elements.

Thanks so much!

Answer 1

You need to set the canvas as a block element (a div is block level by default), it is inline by default which is why you are seeing the variation in behaviour:

Demo Fiddle

canvas{
    display:block
}