画布下方的空白空间 [英] White empty space below Canvas

问题描述

花了数小时摆弄代码后，我遇到了一个问题。我创建了一个灰色的HTML画布，它将填充整个屏幕，并且可以正常工作。但是，尽管画布应该是屏幕上唯一可见的对象，但是当我向下滚动时，页面底部似乎仍然有一个小的空白区域。我已经知道与身体无关，因为我已经尝试将颜色更改为灰色。

After spending hours fiddling with code, I got a problem. I created a grey HTML canvas that would fill up the whole screen, and it worked. But even though the canvas should be the only visible object on the screen, there still seems to be a small white empty space on the bottom of the page when I scroll down. I already know it's nothing to do with the body because I already tried changing the color to grey.

这是我的代码：

头：

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    canvas {
        background-color: #1A1A1A;
    }
</style>

正文：

<canvas onload="init();" id="canvas"></canvas>
<script>
    var size = {
        width: window.innerWidth || document.body.clientWidth,
        height: window.innerHeight || document.body.clientHeight
    }
    canvas.height = size.height;
    canvas.width = size.width;
</script>

推荐答案

将显示块添加到canvas元素。默认画布是内联元素，这对他们来说是常见的行为：

Add display block to the canvas element. Be default canvas is inline element and this is usual behavior for them:

canvas {
    background-color: #1A1A1A;
    display: block;
}

演示：http://jsfiddle.net/LvSxN/

尝试注释掉 display：block 查看其如何更改所有内容。

Demo: http://jsfiddle.net/LvSxN/

Try commenting out display: block to see how it changes everything.

此外，您不需要javascript。 CSS应该足够了：

Moreover you don't need javascript for this. CSS should be enough:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
canvas {
    background-color: #1A1A1A;
    display: block;
    width: 100%;
    height: 100%;
}

这篇关于画布下方的空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！