如何使用 CSS 使 flexbox 子项达到其父项的 100% 高度？

Flexbox 是一种布局模式，用于创建灵活的，响应式的基于行或列的布局。但是，当您将 flexbox 用于垂直布局时，您可能会遇到一个常见的问题：子项没有填满父项的高度。

这种情况可以通过 CSS 解决，下面我们介绍一些方法。

方法一：使用 flexbox 的 stretch 属性

设置父容器的 align-items 属性为 stretch，可以使其子项在纵向上填满父容器的高度。

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  /* 这里不需要设置高度，会被自动填满父容器的高度 */
}

方法二：使用百分比高度

子项的高度可以使用百分比来表示，使得子项的高度等于父项的百分比值。但是，为了实现这种方法，父容器也必须设置高度，否则百分比将没有效果。

.parent {
  height: 100%;
}

.child {
  height: 100%;
}

方法三：使用绝对定位

设置子项的 position 属性为 absolute，并将 top、bottom、left、right 的值都设置为 0，这样子项就可以占据其父容器的全部空间。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

总结

以上是三种方法，可以使 flexbox 子项达到其父项的 100% 高度。选择哪种方法，完全取决于您的具体情况和需求。