CSS布局挑战：子元素高度匹配父元素，宽度充满浏览器视窗
本文解决一个常见的CSS布局难题：如何使子元素（box-2）的高度与父元素（box-1）完全一致（包含内边距），同时子元素的宽度超出父元素，并占据整个浏览器窗口的宽度。 我们不修改HTML结构，仅通过CSS实现。
初始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，且宽度充满整个浏览器窗口。
立即学习“前端免费学习笔记（深入）”；
解决方案：巧用绝对定位和视口宽度单位 (vw)
通过结合绝对定位和视口宽度单位 (vw)，可以有效解决此问题。
-
父元素相对定位: 将父元素 box-1 设置为
position: relative，允许子元素使用绝对定位进行布局。 -
子元素绝对定位和 vw 单位: 将 box-2 设置为
position: absolute，脱离文档流。使用width: 100vw使其宽度占据整个视口宽度，并用height: 100%使其高度与父元素一致。
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 类设置了最大宽度，需要进行调整以确保 box-2 仍然水平居中并充满浏览器宽度。
body {
margin: 0;
}
.container {
max-width: 1000px; /* 例如，容器最大宽度为 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%);
}
此版本中，我们使用 left: 50%; transform: translateX(-50%); 来确保 box-2 水平居中。
通过以上方法，即使 box-3 内容高度发生变化，box-2 始终保持与 box-1 一致的高度，并覆盖整个浏览器宽度。
