Question

我在div中有一个<canvas>并且为了保持其界限等于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)，我可以将canvas'元素调整为其父div，仅使用css width / height吗？ 3)为什么当我调整窗口大小时画布会增长和增长？ 4)为什么画布'clientHeight不是它的height（虽然这也是错误的）最终会比父div clientHeight稍微小一点？宽度匹配好吗？

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

Answer 1

我之前遇到过这种情况。尝试添加以下样式：

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

我认为这也有助于我：

body { overflow: hidden; }

如果那些人没有做到这一点，那么有各种其他奇怪的事情会导致不受欢迎/无法解释的空间，有时会设置line-height: 0, font-size: 0帮助

我只记得在没有上述任何内容的情况下可能有效的其他内容。制作画布{ position: absolute; top: 0; left: 0 }

画布元素不保持父Div

1 个答案: