Question

我有什么：

一个测试css网格显示的简单网站。还有一个canvas元素，它应该用id＆＃34; content＆＃34;填充div元素。（下面的片段）

有什么问题：

一旦我添加了canvas元素，网格系统的比例就不再正确了。您可以通过删除canvas元素并将其放回来在下面的代码段中自行测试和查看。

我尝试了什么：

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

问题：

如何使画布填满整个网格区域＆＃34;内容＆＃34;，而不拉伸画布并且不使网格本身不成比例？

附加

感谢您的时间。

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

它的作用 它应该做什么

Answer 1

如果适合您，请尝试此操作：

CSS：

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

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

CSS网格内的画布大小

1 个答案: