CSS布局：如何让子元素高度与父元素一致且宽度撑满浏览器？

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS布局：如何让子元素高度与父元素一致且宽度撑满浏览器？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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)，可以有效解决此问题。

1. 父元素相对定位: 将父元素 box-1 设置为 position: relative，允许子元素使用绝对定位进行布局。

2. 子元素绝对定位和 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 一致的高度，并覆盖整个浏览器宽度。

理论要掌握，实操不能落！以上关于《CSS布局：如何让子元素高度与父元素一致且宽度撑满浏览器？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！