HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？

html中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？

html中实现特殊布局需求

在网页布局中，有时会遇到一些奇葩的需求。例如，现在有人要求实现如下效果：

需求：

容器中，的高度等于的高度，的宽度要超出并占满整个窗口（）。

不改变 html 结构的前提下，如何实现？

解法：

一种实现方法如下：

<body>
  <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>
</body>

body {
  margin: 0;
}

.container {
  position: relative;
}

.box-2 {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

解释：

将设置为position: relative，这样可以绝对定位在其内部。
将设置为 width: 100vw 和 height: 100% 以使其占满整个窗口。
使用 position: absolute 将定位在的左上角，并使用 transform: translatex(-50%) 将其居中。

补充：

如果已定义了.container 的最大宽度，则需要对 css 进行相应调整：

.container {
  max-width: 1000px;
  padding: 0 5em;
  margin: 0 auto;
}

... 其他 CSS 规则保持不变 ...

以上就是HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？的详细内容，更多请关注硕下网其它相关文章！