是什么導致我的Canvas元素溢位，我能做些什么來修復它？

我在正確調整畫布元素大小時遇到??問題。如下所示的結果是一個畫布元素（綠色輪廓），將其高度擴展到其父 div 之外。是什么導致了這個問題，我能做些什么來解決它？

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：最后是實際調整 Canvas 元素大小的 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;
}

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

嘗試這個：

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

uj5u.com熱心網友回復：

每當您使用 100% 的高度并且想要基于其父級的高度時，您需要將父級位置設定為相對。

此外，您使用的布局看起來很適合彈性盒布局。

最后，如果您希望它具有回應性，您將需要附加一個調整大小事件來設定畫布大小。

下面是使用這些技術的示例，我還包括了頁腳部分，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>

uj5u.com熱心網友回復：

您可以嘗試添加html {overflow-x: hidden; overflow-y:hidden;}到您的 SCSS 以阻止溢位

標籤：javascript html css 帆布

上一篇：使用Webpacker添加Bootstrap后RailsDestroy無法正常作業

下一篇：反應-Redux。通過useDispatch更改狀態后，組件未通過useSelector更新