Javascript 画布元素不保持父Div的高度

我在一个div中有一个

，为了保持它的边界与div相等，我使用下面的代码（出于不相关的原因，我使用Javascript创建了一些html/css，我假设在JS中做的应该是等效的）

创建和添加画布时：

    this.canvas = document.createElement("canvas")
    this.canvasContainerDiv.appendChild(this.canvas)
    this.canvas.style.backgroundColor = "orange"
    this.canvas.style.width = "100%"
    this.canvas.style.height = "100%"
    this.canvas.width = this.canvasContainerDiv.clientWidth
    this.canvas.height = this.canvasContainerDiv.clientHeight

然后在“调整大小”回调窗口中：

window.onresize = (e) => {
        this.canvas.width = this.canvasContainerDiv.clientHeight
        this.canvas.height = this.canvasContainerDiv.clientHeight
}

---

不幸的是，画布没有完全填满父div的边界。它会留下一些缺少高度的像素。因此，如果我调整窗口的大小，使父div为522，画布的“

clientHeight

将为518或其他。此外，当我调整窗口的高度时，画布的高度将单调增长

我对此有很多问题

1）

将父div的

clientHeight

分配给画布的

height

属性是否是保持画布的高度与其匹配的正确方法<代码>2），我是否可以仅使用css宽度/高度将canvas元素的大小调整为其父div<代码>3）当我调整窗口大小时，画布为什么会不断增长

4）

为什么画布的

clientHeight

不是它的

height

（尽管这也是错误的）最终会比父div的

clientHeight

稍微小一些？宽度合适吗

---

一些额外的信息。如果我用div元素替换画布，我看不到我提到的任何一个问题。div现在跨越其父级的确切高度，并且不会受到无限高增长问题的影响。这使我相信，大小调整问题与画布自身的功能有关，如上下文/绘图大小/高度属性等。

我以前遇到过这个问题。尝试添加以下样式：

html, body { padding: 0; margin: 0; width: 100%; height: 100%; }

我认为这对我以前也有帮助：

body { overflow: hidden; }

如果这些不起作用，那么还有其他各种奇怪的事情可能会导致不需要的/无法解释的空间，有时设置

行高：0，字体大小：0有帮助

我只是想起了一些其他的东西，如果没有上面的任何一个，它们可能会起作用。使画布成为
{position:absolute；top:0；left:0}
你能发布一个工作的HTML/JS代码段吗？我发布了我认为相关的代码。在
窗口中。onresize
，你是说
this.canvas.width=this.canvasContainerDiv.offsetWidth
而不是
this.canvas.width=this.canvasContainerDiv.offsetHeight
？对不起，输入错误。这意味着两者都应该是客户机*我仍在计算
[client/offset][width/height]
属性的含义正好符合我的需要。