CSS网格内的画布大小答案

【问题标题】：Canvas size inside CSS gridCSS网格内的画布大小
【发布时间】：2018-04-18 01:27:11
【问题描述】：

我有什么：

一个测试css网格显示的简单网站。还有一个画布元素，它应该用 id "content" 填充 div 元素（下面的 sn-p）

有什么问题：

一旦我添加了画布元素，网格系统的比例就不再正确了。您可以在下面的 sn-p 中自己测试并查看它，只需移除 canvas 元素并将其放回即可。

我尝试过的：

我尝试通过向 css 添加宽度和高度来解决此问题，这导致画布被拉伸。例如：如果我要画一个正方形，它会在画布中变成一个矩形（由于拉伸）。
我尝试分配 canvas.width 和 canvas.height。但它仍然没有填满整个 div 元素。

问题：

我怎样才能使画布填满整个网格区域“内容”，而不拉伸画布并且不使网格本身不成比例？

额外

感谢您的宝贵时间。

var canvas = document.querySelector("#canvas");
var div = document.getElementById("header");
var div2 = document.getElementById("content");

canvas.width = div2.clientWidth;
canvas.height = div2.clientHeight;

canvas{
    background: green;
}
.site
{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 33%, auto, 33%;
    grid-template-columns: 33%, auto, 33%;
    grid-template-areas:
        "header header navbar"
        "c c sidebar"
        "footer footer footer";
}
#header
{
    grid-area: header;
    background: rgb(255, 0, 0);
}
#navbar
{
    grid-area: navbar;
    background: rgb(255, 238, 0);
}
#content
{
    grid-area: c;
    background: rgb(60, 255, 0);
}
#sidebar
{
    grid-area: sidebar;
    background: rgb(0, 98, 255);
}
#footer
{
    grid-area: footer;
    background: rgb(255, 0, 234);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CssGrid</title>
</head>
<body>
    <div class="site">
        <div id="header">header</div>
        <div id="navbar">navbar</div>
        <div id="content">
            <canvas id="canvas"></canvas>
        </div>
        <div id="sidebar">sidebar</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

它的作用 应该怎么做

【问题讨论】：

标签： javascript css html canvas gridview

【解决方案1】：

如果它适合你，试试这个：

CSS：

#content {
    grid-area: c;
    background: rgb(60, 255, 0);
    position: relative;
}

canvas {
    background: green;
    position: absolute;
    height: 100%;
    width: 100%;
}

【讨论】：

我完全忽略了位置。这工作得很好。
Daaaamn 也完全忽略了这一点，很好！
我不明白为什么，但这完美！