CSS 填充父高度

在 Web 开发中，我们有时需要让一个元素填充其父元素的完整高度。这在实现一些复杂的页面布局时尤为重要。本文将讨论 CSS 实现填充父元素高度的几种不同方法。

flexbox

使用 flexbox 是实现填充父元素高度的最简单的方法之一。我们可以使用 CSS 属性 display: flex 将父元素变成一个 flex container，并设置 flex-direction: column 将它内部的子元素沿垂直方向排列。

接下来，我们需要设置子元素的 flex 属性为 1，这样它们将会占据剩余空间，从而填充父元素的完整高度。

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

absolute+position

在这种方法中，我们使用 CSS 的 position 属性将父元素设置为 relative，将子元素设置为 absolute 并对其设置 top: 0 和 bottom: 0，这样子元素将会填充整个父元素。

.parent {
  position: relative;
}

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

min-height

我们也可以使用 min-height 属性来实现填充父元素高度。我们将父元素设置为 100% 的高度，然后将子元素的 min-height 属性设置为其父元素的高度，这样子元素将会填充整个父元素。

.parent {
  height: 100%;
}

.child {
  min-height: 100%;
}

calc()

最后一种方法是使用 CSS 函数 calc()，它可以实现简单的数学计算。我们将父元素设置为 100% 的高度，然后将子元素的 height 属性设置为 calc(100% - XXpx)，其中 XXpx 表示子元素上下 margin 的高度。

.parent {
  height: 100%;
}

.child {
  height: calc(100% - XXpx);
}

上述方法各有优缺点，我们可以根据具体情况选择最合适的方法来实现填充父元素高度。

参考链接：

• CSS-Tricks: Centering in the Unknown
• CSS-Tricks: Using the min-height Property for Flexible Layouts
• MDN: calc()