css - 相对于父级调整 div 的大小

Question

fiddle在这里，我的问题基本上是如何让红色矩形相对于父 div 调整大小。换句话说，矩形应该覆盖父区域的相同区域，无论其大小如何调整。

父div和子div是下面的 Canvas 和矩形。

#canvas {
position: relative;

}

.rectangle {
    border: 3px solid red;
    /* background-color: rgba(255, 148, 0, 0.25); */
    position: absolute;
}

红色矩形也超出了父级，我猜这与绝对位置有关，如果可能的话应该避免。

编辑

矩形在 fiddle 中被硬编码的原因是实际上它是由用户在浏览器中绘制的，我懒得把那个 js 放在那里。示例矩形是用户可以绘制的东西。

Answer 1

这样做:(从 div.rectangle 中删除内联 css)

.rectangle {
    border: 3px solid red;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}