css布局的一个问题?

Question

<style>
  .box-2 {
      background-color: rgba(0, 0, 0, .2);
     height: 100px;
  }
</style>

<div class="box-1 container py-5">
  <div class="box-2"></div>
  <div class="box-3">
    111 <br>
    111 <br>
    111 <br>
    111 <br>
    111 <br>
  </div>
</div>

如上 HTML 结构, 效果图如下

height: 100px; 高度只是演示效果, 实际高度是由 box-3 来填充
现在有个奇葩的需求, 就是要实现 box-2 的高度等于 box-1 的高(包括内边距).
并且 box-2 的宽度要超出 box-1 并占满整个 body 效果图如下, 灰色填充的是box-2

在不改变 HTML 结构的情况下应该如何去实现需求?

Answer 1

一个简单的实现:

<style>
  body{
    margin: 0;
  }
  .box-1 {
    position: relative;
  }
  .box-2 {
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
  }
</style>

<div class="box-1 container py-5">
  <div class="box-2"></div>
  <div class="box-3">
    111 <br>
    111 <br>
    111 <br>
    111 <br>
    111 <br>
  </div>
</div>

---

补充回答，因为不知道你的 .container 是预设的怎么样的最大宽度，所以自己大概写了一个新的：

<style>
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, .2);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<div class="box-1 container py-5">
  <div class="box-2"></div>
  <div class="box-3">
    111 <br>
    111 <br>
    111 <br>
    111 <br>
    111 <br>
  </div>
</div>

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。