让元素仅使用 CSS 将父容器的过去填充一直"Stretch"到边缘？

Question

如果我们有这样的元素:

<main style="padding: 16px; width: 400px; border: 2px dashed gray;">
<div style="background-color: gray;">header</div>
<section>content</section>
</main>

是否有一种方法可以让div元素一直延伸到父元素的边缘，而不是使用仅应用于div元素的CSS填充?

有人提到对div使用负边距值，这是可行的。

我希望有一种不直接使用值的方法，以防应用于父容器的CSS填充改变。

Answer 1

如果您知道父元素的内边距是多少，则可以对子元素应用负边距。然后(可选地)重新应用填充到子元素，使你的内容保持在原始父元素的边界内。

.wrapper {
padding: 16px;
border: 2px dashed gray;
}
.header {
background-color: gray;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}

<main class="wrapper" style="width: 400px;">
<div class="header">header</div>
<section>content</section>
</main>

Answer 2

如果您只想扩展背景，这里有一个使用border-image的想法，但您需要将overflow:hidden添加到父级

<main style="padding: 16px; width: 400px; border: 2px dashed gray;overflow:hidden">
<div style="border-image:conic-gradient(gray 0 0) fill 0//100vw 100vw 0 100vw;">header</div>
<section>content</section>
</main>

Answer 3

可以用position: absolute求解

<main style="padding: 16px; width: 400px; border: 2px dashed gray; position: relative">
<div style="background-color: gray; position: absolute; left: 0; top: 0; right: 0;">header</div>
<section>content</section>
</main>