CSS 网格内的画布大小
Kev*_*vin 6 html javascript css gridview canvas
我拥有的：
一个简单的测试css网格显示的网站。还有一个画布元素，它应该用 id "content" 填充 div 元素（下面的片段）
问题是什么：
一旦我添加了画布元素，网格系统的比例就不再正确。您可以在下面的代码片段中亲自测试并查看它，只需删除画布元素并将其放回原处。
我尝试过的：
- 我试图通过向 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>它能做什么
它应该做什么
如果它适合你，试试这个：
CSS：
#content {
grid-area: c;
background: rgb(60, 255, 0);
position: relative;
}
canvas {
background: green;
position: absolute;
height: 100%;
width: 100%;
}
| 归档时间： |
|
| 查看次数： |
4380 次 |
| 最近记录： |