Canvas下面的白色空白空間

Question

花了幾個小時擺弄代碼后，我遇到了問題。 我創建了一個灰色的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>

Answer 1

將顯示塊添加到canvas元素。 默認畫布是內聯元素，這是他們的常見行為：

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/