我需要一张 Canvas 作为 div 的背景,所以我放置了一个与它重叠的 Canvas 。然而,它并没有填满整个事情。我尝试设置左、右、上、下,并将边距和填充设为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>
最佳答案
我发现为了仅使用 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 fiddle : https://jsfiddle.net/vhsdLncu/35/ 。如果您想查看更多信息,请参阅以下教程:https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ 希望有帮助!
关于jquery - Canvas 未填满 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50958415/