divの大きさにぴったり当てはまるcanvasを作成したい。

bootstrapのcolumn内にぴったり収まるようなcanvasを追加したいです。
次のようなコードを書いたところ、画面サイズをドラッグして変えた時にcolumnのheightがとても大きくなってしまいます。
理由と解決方法が知りたいです。よろしくお願いします。

html
1<!doctype html>
2<html lang="en">
3
4<head>
5  <!-- Required meta tags -->
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8
9  <!-- Bootstrap CSS -->
10  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
11    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12
13  <title>Hello, world!</title>
14</head>
15
16<body>
17  <style>
18    .col {
19      background-color: aqua;
20      padding: 1px;
21    }
22  </style>
23  <div class="container">
24    <div class="row">
25      <div class="col border">
26        <div id="canvas-container">
27          <canvas id="canvas" style="background-color: brown;"></canvas>
28        </div>
29      </div>
30      <div class="col border">
31        Column2
32      </div>
33    </div>
34    <div class="row">
35      <div class="col border">
36        Column1
37      </div>
38      <div class="col ">
39        Column2
40      </div>
41      <div class="col border">
42        Column3
43      </div>
44    </div>
45  </div>
46  <script>
47    window.addEventListener("load", function () {
48      let container_width = document.getElementById("canvas-container").clientWidth;
49      let container_height = document.getElementById("canvas-container").clientHeight;
50      let canvas = document.getElementById("canvas");
51      canvas.width = container_width;
52      canvas.height = container_height;
53    });
54    window.addEventListener("resize", function () {
55      let container_width = document.getElementById("canvas-container").clientWidth;
56      let container_height = document.getElementById("canvas-container").clientHeight;
57      let canvas = document.getElementById("canvas");
58      canvas.width = container_width;
59      canvas.height = container_height;
60    })
61  </script>
62  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
63    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
64    crossorigin="anonymous"></script>
65
66
67</body>
68
69</html>

行動規範の内容に同意します

回答1件

ベストアンサー

やりたいこと自体は

css
1#canvas{
2  width: 100%;
3  height: 100%;
4}

で実現できると思います。

今回なぜ無限にheightが伸びるかというと、
clientHeightを挿入後に、#canvas-containerと#canvasのheightに差があることに気づいたでしょうか？
細かくはみていませんがBootStrapのline-height等でcanvas-containerのheightをcanvasのheightに挿入した直後にcanvas-containerのheihgtが増加していることが確認できました。
フレームワークの仕様として存在するため、BootStrapを手放せば今回のJSでも反映は可能だと思われます。

投稿2022/02/13 16:44