Javascript 画布大小与父级相同

我有一个很好的HTML布局，有左栏、右栏和中心区域。左栏有文本的顶部和底部标签，以及（未注释时）垂直中心画布。当浏览器窗口大小改变时，布局确实可以很好地调整自身大小

当我取消对画布的注释并尝试使用JavaScript处理调整大小消息使其适合父级大小时，它会以某种方式阻止布局根据窗口范围调整自身大小。相反，窗口会获得一个垂直滚动条，布局不再是“100%”，而是大于视口大小

所讨论的代码如下所示：

<tr style="height: 80%;">
    <td align="center" id="controlparent" bgcolor="#E6E6FA">
        <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
    </td>
</tr>

我犯了什么错误

（请注意，我现在正在使用HTML表格进行布局-我已经尝试使用CSS进行布局，对于初学者来说，使用CSS进行布局太痛苦了）

---

.

Canvas

width

和

height

属性（和属性）始终以像素形式给出，不带任何单位

如果您不想使用CSS，在这种情况下，您将在元素内部使用

style=“width:100%；height:100%”属性，您需要使用JavaScript计算父元素的宽度/高度

要使用JavaScript计算父级大小，请执行以下操作：


var ctrl=document.getElementById（“控件”），
parentSize=ctrl.parentNode.getBoundingClientRect（）；
ctrl.width=parentSize.width；
ctrl.height=parentSize.height
html，正文{宽度：100%；高度：100%；边距：0}

Ah，你说得对，当我使用style而不是HTML属性时，它起作用了。谢谢你，K3N。请重新编辑您的回答。@Robinson请记住画布位图的默认大小为300x150，因此您可能也想为此设置大小（在如何计算此值的答案中添加了一种方法），实际上我说得太快了。虽然我可以设置画布的大小，但它似乎会影响表格的整体高度，因此我最终会看到底部标签从窗口中消失，并出现一个滚动条。我如何计算它，或者我是否100%使用CSS height，这似乎并不重要。@Robinson我隐约记得一些关于使用表格的高度的问题。如果可能的话，你可以考虑使用表布局或Flex的div（然后我看到你想要避免这一点——另一方面，表并不是真正用于布局，所以它可以证明比在CSS中更痛苦，你在某些时候需要的……只是我的意见：））。我明白我做错了什么。您最初的想法是100%使用样式而不是属性，这是正确的。谢谢