如何删除 html5 画布的额外高度？答案

【问题标题】：How can I remove the extra height of html5 canvas?如何删除 html5 画布的额外高度？
【发布时间】：2011-06-14 16:42:24
【问题描述】：

我正在测试 html5 画布元素，并希望我的画布在显示区域中全屏显示。但是我发现如果我将画布高度设置为window.innerHeight，滚动条就会显示出来。我试过了，发现需要将高度设置为 5 像素以下，滚动条会消失，但不幸的是它在画布下方留下了一个白色边框。如果是 div 元素，一切都很好。

我用来测试的代码是：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function load() {
    var o = document.getElementById('canvas');
    if (o) {
        o.width = window.innerWidth;
        o.height = window.innerHeight - 5;
    }
    o = document.getElementById('div');
    if (o) {
        o.style.width = window.innerWidth + 'px';
        o.style.height = window.innerHeight + 'px';
    }
}
</script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: white;
}
#canvas {
    background-color: blue;
}
#div {
    background-color: green;
}
</style>
</head>
<body onload="load();">
<canvas id="canvas"></canvas>
<!--div id="div"></div-->
</body>
</html>

我已经清除了正文边距和内边距。

我在 Chrome 8.0.552 上对其进行了测试，它在 Firefox 3.6.13 上的行为也相同，但少了 4 个像素就可以了。

我错过了什么？任何建议将不胜感激。非常感谢。

【问题讨论】：

标签： html canvas

【解决方案1】：

默认情况下canvas 与div 不同，它是display: inline;，因此它被设置为vertical-align: baseline;。您可以采取以下任一方法，让事物自然地填充window.innerHeight：

#canvas {
    background-color: blue;
    vertical-align: top;
}

或者：

#canvas {
    background-color: blue;
    display: block;
}

【讨论】：