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

Setting height & width of canvas element to window.innerHeight/innerWidth causing scrollbars

本文关键字：innerHeight window 设置 innerWidth 滚动条 布元素 元素 高度      更新时间：2023-09-26

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

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

我通过将 canvas 标签的 CSS 显示属性设置为"block"解决了同样的问题。

canvas {
  display: block;
}

这将修复它：

canvas {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
相关文章：