1
私が持っているもの：キャンバスサイズ
CSSのグリッド表示をテストするシンプルなウェブサイト。 ID「コンテンツ」（以下抜粋）とdiv要素を埋めることになっているとcanvas要素
問題は何ですか：
できるだけ早く私は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>それは何 
それはそれはあなたのために働く場合 
私は完全に位置を見落としました。これは完全に正常に動作します。 – Kevin