是什么导致我的画布元素溢出，我该怎么办才能修复它？

Question

我在适当的帆布元素上尺寸尺寸有问题。如下所示的结果是一个帆布元素（绿色轮廓），该元素将其高度扩展到其父级之外。是什么导致了这个问题，我该怎么办才能解决？

html：这是HTML代码，没有太多代码。

<div id="container">
    <div id="content">
        <div id="menu">
            ...
        </div>
        <div id="canvas-container">
            <canvas>
    
            </canvas>
        </div>
    </div>
</div>

scss：更有趣的SCSS代码。

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-size: 16px;
    font-family: 'Inter', sans-serif,
}

#container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    #content {
        outline: 2px solid rgb(0, 0, 0);
        width: 80%;
        height: 80%;

        #menu {
            padding: 1em;
            border-bottom: 2px solid black;

            select {
                padding: 1em;
            }

            a {
                background-color: rgb(91, 134, 195);
                text-decoration: none;
                font-weight: bold;
                padding: 0.8em;
                color: white;
            }

            a:hover {
                background-color: rgb(75, 122, 189);
            }

        }

        #canvas-container {
            width: 100%;
            height: 100%;

            canvas {
                outline: 2px solid green;
            }
        }

    }

}

javaScript：以及最后的JS代码实际上可以完成帆布元素的大小。

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

Answer 1

每当您使用100％的高度，并且您希望根据父母的高度，就需要将父母的位置设置为相对。

另外，您的使用外观的布局将非常适合Flexbox布局。

最后，如果您希望这会做出响应速度，则您将要附加一个调整大小事件以设置画布大小。

以下是使用这些技术的示例，我还提供了一个页脚部分，Flexbox使这些布局变得轻而易举。提示：运行摘要全屏，并调整窗口大小以查看调整大小的操作。

const c = document.querySelector('canvas');
const cc = document.querySelector('.canvas-container');

function drawSomething() {
  const ctx = c.getContext('2d');
  const w = c.offsetWidth; h = c.offsetHeight;
  const cnt = 25;
  const sw = w / cnt; sh = h / cnt;
  for (let l = 0; l <= cnt; l ++) {
    ctx.moveTo(0, l * sh);
    ctx.lineTo(w - l * sw, 0);
    ctx.moveTo(w, l * sh);
    ctx.lineTo(l * sw, 0);
    ctx.moveTo(0, l * sh);
    ctx.lineTo(w - l * sw, h);
    ctx.moveTo(w, l * sh);
    ctx.lineTo(l * sw, h);
  }
  ctx.stroke();
}

function resize() {
  c.width  = cc.offsetWidth;
  c.height = cc.offsetHeight;
  drawSomething(); 
}

window.addEventListener('resize', resize);
resize();

body {
  margin: 0;
}

.container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  color: white;
  background-color: green;
}


.canvas-container {
  flex: 1;
  position: relative;
}

canvas {
  background-color: lightgreen;
  position: absolute;
}

<div class="container">
  <div class="header">This is the menu</div>
  <div class="canvas-container">
    <canvas></canvas>
  </div>
  <div class="footer">footer</div>
</div>

Answer 2

here is you add in css  `#container{height:100%}` you can replace `height:100%;` to "`min-height:100%;`"

var canvas = document.querySelector("canvas");
fitToContainer(canvas);

function fitToContainer(canvas) {
  // Make it visually fill the positioned parent
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  // ...then set the internal size to match
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

* {
     margin: 0;
     padding: 0;
}
 html, body {
     height: 100%;
     font-size: 16px;
     font-family: "Inter", sans-serif;
}
 #container {
     min-height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 #container #content {
     outline: 2px solid #000;
     width: 80%;
     height: 80%;
}
 #container #content #menu {
     padding: 1em;
     border-bottom: 2px solid black;
}
 #container #content #menu select {
     padding: 1em;
}
 #container #content #menu a {
     background-color: #5b86c3;
     text-decoration: none;
     font-weight: bold;
     padding: 0.8em;
     color: white;
}
 #container #content #menu a:hover {
     background-color: #4b7abd;
}
 #container #content #canvas-container {
     width: 100%;
     height: 100%;
}
 #container #content #canvas-container canvas {
     outline: 2px solid green;
}
 

<div id="container">
  <div id="content">
    <div id="menu">
      ...
    </div>
    <div id="canvas-container">
      <canvas>

      </canvas>
    </div>
  </div>
</div>

Answer 3

尝试以下操作：

#container 
    #content {
        outline: 2px solid #000;
        width: 80%;
        height: 80%;
        >> display: flex;
        >> flex-direction: column;
    }