将画布元素的高度和宽度设置为 window.innerHeight/innerWidth 导致滚动条答案

【问题标题】：Setting height & width of canvas element to window.innerHeight/innerWidth causing scrollbars将画布元素的高度和宽度设置为 window.innerHeight/innerWidth 导致滚动条
【发布时间】：2012-07-03 08:40:22
【问题描述】：

这非常简单，但我无法弄清楚它为什么会导致滚动条。代码如下：

CSS

body, canvas, html{margin:0;padding:0;border:0 none;}
canvas{background:Black;}

HTML

<html>
    <head></head>
    <body></body>
</html>

JavaScript

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementsByTagName("body")[0].appendChild(canvas);

这不应该只是导致画布跨越可视窗口的宽度和高度吗？这是一个 JSFiddle 示例：http://jsfiddle.net/TyJYH/

【问题讨论】：

可能是包含元素，body 和 html，在画布周围添加边距或填充。您可以将画布位置设为绝对或固定。或者将边距和填充显式设置为 0。

标签： javascript html css

【解决方案1】：

这将解决它：

canvas {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}

【讨论】：

感谢您的意见。这更像是一种“黑客”。我更关心的是为什么将元素指定为与可视窗口相同的高度/宽度会导致滚动条，即使我将所有启用的元素指定为零边距、填充和边框。
stackoverflow.com/questions/4288253/…。少“hacky”。 :-)

【解决方案2】：

我通过将 canvas 标签的 CSS display 属性设置为“block”解决了同样的问题。

canvas {
  display: block;
}

【讨论】：

谢谢，在找到这个答案之前，我阅读了很多问题。我发现的最疯狂的解决方案是在窗口的右下角position: fixed 一个透明图像并使用它来进行测量。这被接受并投票赞成！
天啊！我刚刚意识到当<canvas> 是display: inline 时，它有行高。