Question

我正在测试html5 canvas元素，并希望我的画布在显示区域全屏显示。但我发现如果我将画布高度设置为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个像素更好。

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

Answer 1

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

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

或者：

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

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

1 个答案: