html - 将绝对定位的子项设置为父项宽度的 100%，包括边框

Question

我有以下代码:

.parent , .child{
    border: 10px solid black;
    position: relative;
    box-sizing: border-box;
	background:green;
}
.child{
	background:blue;
    position: absolute;
    left: -10px;
    top: 100%;
    border-radius: 0px 0px 10px 10px;
	width:100%
}

<div class="parent">
Parent Element
<div class="child">
Child Element
</div>
</div>

虽然这可以通过将宽度更改为 calc(100% + 20px); 来实现，但是否有更动态的方法来确保底部 div 与顶部对齐(不使用 flexbox ) ？

Answer 1

既然您已经在使用 left: -10px，为什么不简单地使用 right: -10px 而不是设置宽度。

.parent , .child{
    border: 10px solid black;
    position: relative;
    box-sizing: border-box;
	background:green;
}
.child{
	background:blue;
    position: absolute;
    left: -10px;
    right: -10px;
    top: 100%;
    border-radius: 0px 0px 10px 10px;
}

<div class="parent">
Parent Element
<div class="child">
Child Element
</div>
</div>