画布下方的空白区域答案

【问题标题】：White empty space below Canvas画布下方的空白区域
【发布时间】：2014-03-11 21:27:46
【问题描述】：

在花了几个小时摆弄代码之后，我遇到了一个问题。我创建了一个灰色的 HTML 画布，它可以填满整个屏幕，而且效果很好。但是即使画布应该是屏幕上唯一可见的对象，当我向下滚动时，页面底部似乎仍然有一个小的白色空白区域。我已经知道这与身体无关，因为我已经尝试将颜色更改为灰色。

这是我的代码：

头：

<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>

【问题讨论】：

这是在什么浏览器中？
建议您创建一个jsFiddle 来重现您的具体问题

标签： html css canvas

【解决方案1】：

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

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

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

尝试注释掉display: block，看看它如何改变一切。

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

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

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

【讨论】：