CSS布局挑战：如何让子元素高度与父元素一致，同时宽度超出父元素边界？
本文旨在解决一个常见的CSS布局问题：如何在不修改HTML结构的前提下，使子元素（box-2）的高度始终等于父元素（box-1）的高度（包含内边距），并使其宽度延伸至整个浏览器窗口，超出父元素边界。
以下为初始HTML结构：
<div class="box-1 container py-5">
<div class="box-2"></div>
<div class="box-3">
111 <br><br>
111 <br><br>
111 <br><br>
111 <br><br>
111 <br><br>
</div>
</div>
其中，box-2 的初始高度仅为演示用途，实际高度由 box-3 内容决定。我们的目标是让 box-2 的高度始终与 box-1 保持一致，同时宽度充满整个浏览器视口。
立即学习“前端免费学习笔记（深入）”；
解决方案：利用position: absolute和width: 100vw
通过将 box-1 设置为 position: relative，使其子元素 box-2 可以相对于其进行绝对定位。然后，将 box-2 的 width 设置为 100vw，使其宽度占据整个视口宽度，并设置 height: 100% 使其高度与父元素 box-1 相同。
CSS代码如下：
body {
margin: 0;
}
.box-1 {
position: relative;
}
.box-2 {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
处理父元素最大宽度限制
如果 .container 设置了最大宽度（例如使用 max-width 属性），则需要进一步调整 box-2 的位置，使其水平居中并超出 .container 边界。以下代码提供了一种解决方案：
body {
margin: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.py-5 {
padding: 0 5em;
}
.box-1 {
position: relative;
}
.box-2 {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
在这个例子中，我们为 .container 设置了最大宽度，并使用 left: 50%; 和 transform: translateX(-50%); 使 box-2 水平居中。 记住调整 .py-5 的padding值以适应你的设计。
通过以上方法，即可实现子元素高度与父元素一致，同时宽度超出父元素边界的CSS布局效果。
