我的页面结构为嵌套的div。 它们具有填充和边距，因此内部div通常在物理上小于外部div。 但是，在某些情况下，我希望其中一个内部div（下图中的红色框）向宽方向展开，以匹配最外部div的左右边缘。
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d">
</div>
</div>
</div>
</div>
这只是一个示例--嵌套DIV的数量可以不同。 最外面的div的宽度是可变的。 所有DIV的高度也是可变的。
我曾尝试使用绝对定位，但这将从文档流中删除div-d。 由于不知道其内容的高度，所以无法补偿。 还有其他建议吗？ 谢谢你的任何帮助。
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
这种方法是否可以解决问题？
#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding
values)}
#div-c {
display: flex;
align-items: center;
}
#div-d {
width: calc(100% + PADDINGS + BORDERS);
}
Paddings:每个父divs Paddings的总和。
边框:每个父边框的总和。
