0
589
Views¿Qué está causando que mi elemento Canvas se desborde y qué puedo hacer para solucionarlo?
Tengo un problema con el tamaño correcto de mi elemento de lienzo. El resultado, como se ve a continuación, es un elemento de lienzo (contorno verde) que extiende su altura fuera de su div principal. ¿Qué está causando este problema y qué puedo hacer para solucionarlo?
HTML: aquí está el código HTML, no hay mucho.
<div id="container"> <div id="content"> <div id="menu"> ... </div> <div id="canvas-container"> <canvas> </canvas> </div> </div> </div>SCSS: El código SCSS más interesante.
* { 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: y, por último, el código JS que realmente determina el tamaño del elemento Canvas.
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; }3 answers
Answer question0
Prueba esto:
#container #content { outline: 2px solid #000; width: 80%; height: 80%; >> display: flex; >> flex-direction: column; }0
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>0
Siempre que use una altura del 100% y desee que la altura se base en su padre, debe establecer la posición de los padres en relativa.
Además, el diseño que está usando parece encajar muy bien en un diseño de caja flexible.
Por último, si desea que esto responda, querrá adjuntar un evento de cambio de tamaño para configurar el tamaño del lienzo.
A continuación se muestra un ejemplo del uso de estas técnicas, también he incluido una sección de pie de página, flexbox hace que estos diseños sean muy sencillos. sugerencia: ejecute el fragmento de código a pantalla completa y cambie el tamaño de la ventana para ver el cambio de tamaño en acción.
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>