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

要让子元素的高度与父元素一致且宽度撑满浏览器，可以使用以下几种方法：

方法1：使用 flexbox 布局

flexbox 是一种非常灵活的布局方式，可以轻松实现子元素的高度与父元素一致且宽度撑满浏览器。

<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  display: flex;
  height: 100vh; /* 父元素高度撑满视口 */
}

.child {
  flex: 1; /* 子元素宽度撑满父元素 */
  background-color: lightblue;
}

方法2：使用 grid 布局

grid 布局也是一种强大的布局方式，可以实现类似的效果。

<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  display: grid;
  height: 100vh; /* 父元素高度撑满视口 */
}

.child {
  grid-column: 1 / -1; /* 子元素宽度撑满父元素 */
  background-color: lightblue;
}

方法3：使用 height: 100% 和 width: 100%

如果你不想使用 flexbox 或 grid，可以使用传统的 height: 100% 和 width: 100% 来实现。

<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  height: 100vh; /* 父元素高度撑满视口 */
}

.child {
  height: 100%; /* 子元素高度与父元素一致 */
  width: 100%; /* 子元素宽度撑满父元素 */
  background-color: lightblue;
}

方法4：使用 position: absolute

如果你需要子元素相对于父元素绝对定位，可以使用 position: absolute。

<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  position: relative;
  height: 100vh; /* 父元素高度撑满视口 */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 子元素高度与父元素一致且宽度撑满父元素 */
  background-color: lightblue;
}

总结

• flexbox 和 grid 是最推荐的方式，因为它们提供了更灵活的布局控制。
• height: 100% 和 width: 100% 是传统的方式，适用于简单的布局。
• position: absolute 适用于需要绝对定位的场景。

根据你的具体需求选择合适的方法即可。