画布没有填满 div答案

【问题标题】：Canvas not filling up div画布没有填满 div
【发布时间】：2018-11-30 04:32:04
【问题描述】：

我需要一个画布作为 div 的背景，所以我放了一个与它重叠的画布。然而，它并没有填满整个事情。我尝试设置左侧、右侧、顶部和底部，并将边距和填充设置为 0，但它不起作用。 LINK。 CSS：

body {
     background: white;
     padding: 20px;
     font-family: Helvetica;
     height:100%;
}
 #editor_contentwrapper{
     box-sizing: border-box;
     background: #353535;
     position: absolute;
     height:100%;
     width:70%;
     left:0px;
     top:0px;
     overflow-y: scroll;
     padding-top:30px;
}
 #editor_settings{
     background: gray;
     position: absolute;
     height:100%;
     width:30%;
     left:70%;
     top:0px;
}
 #editor_editor{
     background: white;
     width:90%;
     min-width:400px;
     min-height:100%;
     margin:auto;
}
 #editor_canv{
     position:relative;
     left:0;
     top:0;
     background:red;
     width:100%;
     height: 100%;
}

HTML：

<div id=editor_contentwrapper>
   <div id=editor_editor>
      <canvas id=editor_canv></canvas>
   </div>
</div>
<div id=editor_settings></div>

【问题讨论】：

在调整 div 的大小时是否需要调整画布的大小？
是的，画布的大小和位置应与 div 相同。

标签： jquery html css html5-canvas

【解决方案1】：

我发现为了使子元素与父元素的高度相同，仅使用 css，您必须稍微更改 css，如下所示：

#editor_editor{
  position: relative;
  background: white;
  width:90%;
  min-width:400px;
  min-height:100%;
  margin:auto;
}
#editor_canv{
  position: absolute;
  background:red;
  width:100%;
  height: 100%;
}

因此，在这种情况下，#editor_editor 的父元素将具有相对位置，而子元素将具有绝对位置。将子元素#editor_canv 的高度设置为 100%，将调整为父元素的大小。这是js小提琴： https://jsfiddle.net/vhsdLncu/35/。如果您想了解更多信息，这里有一个教程：https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ 希望对您有所帮助！

【讨论】：