我有什么:
一个简单的测试css网格显示的网站。还有一个 canvas 元素应该用 id“content”填充 div 元素(下面的片段)
问题是什么:
一旦我添加了 Canvas 元素，网格系统的比例就不再正确了。您可以在下面的代码片段中亲自测试并查看它，只需移除 Canvas 元素并将其放回原位即可。
我尝试过的:
- 我试图通过向 css 添加宽度和高度来解决此问题，这导致 Canvas 被拉伸(stretch)。例如:如果我要画一个正方形，它将在 Canvas 中变成一个矩形(由于拉伸(stretch))。
- 我尝试分配 canvas.width 和 canvas.height。但它仍然没有填满整个 div 元素。
问题:
如何让 Canvas 填满整个网格区域“内容”，而不拉伸(stretch) Canvas 并且不使网格本身不成比例？
额外
感谢您的宝贵时间。
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>它做什么
它应该做什么
最佳答案
如果它适合你，试试这个:
CSS:
#content {
grid-area: c;
background: rgb(60, 255, 0);
position: relative;
}
canvas {
background: green;
position: absolute;
height: 100%;
width: 100%;
}
关于javascript - CSS 网格内的 Canvas 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47127534/