CSS 如何使一个 div 垂直填充其父元素

在本文中，我们将介绍如何使用 CSS 使一个 div 元素垂直填充其父元素。垂直填充是指让 div 的高度与其父元素的高度相同，以便占据父元素的全部垂直空间。以下将详细介绍几种方法来实现这个效果。

阅读更多：CSS 教程

方法一：使用绝对定位

通过使用绝对定位，可以将一个 div 定位在其父元素的左上角，并且设置其 top 和 bottom 属性为 0，以实现垂直填充的效果。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

上述代码中，.parent 代表父元素，.child 代表子元素。将 .parent 元素的 position 属性设置为 relative，以便使 .child 相对于其进行定位。将 .child 元素的 position 属性设置为 absolute，top 和 bottom 属性设置为 0，这样 .child 就会占据 .parent 的全部垂直空间。

方法二：使用 Flexbox 布局

Flexbox 是一种用于布局的 CSS3 标准，它提供了一种简单而灵活的方式来实现垂直填充。通过将父元素的 display 属性设置为 flex，并将其子元素的 flex 属性设置为 1，可以使子元素垂直填充父元素。

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

.child {
  flex: 1;
}

上述代码中，.parent 代表父元素，.child 代表子元素。通过将 .parent 的 display 属性设置为 flex，并设置其 flex-direction 属性为 column，可以使子元素按垂直方向排列。将 .child 的 flex 属性设置为 1，子元素将会根据剩余的垂直空间进行自动填充。

方法三：使用 Grid 布局

Grid 布局是 CSS3 中另一种用于布局的强大工具，可以通过设置网格行属性实现垂直填充。

.parent {
  display: grid;
  grid-template-rows: 1fr;
}

.child {
  grid-row: 1;
}

上述代码中，.parent 代表父元素，.child 代表子元素。通过将 .parent 的 display 属性设置为 grid，并将其 grid-template-rows 属性设置为 1fr，可以使子元素在一个行网格中填充。将 .child 的 grid-row 属性设置为 1，则子元素会占据第一行的全部垂直空间。

方法四：使用表格布局

表格布局是一种传统的 CSS 布局方法，虽然不如 Flexbox 和 Grid 布局灵活，但对于简单的垂直填充效果仍然有效。

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  height: 100%;
}

上述代码中，.parent 代表父元素，.child 代表子元素。通过将 .parent 的 display 属性设置为 table，并设置其 height 属性为 100%，可以使子元素填充父元素的垂直空间。将 .child 的 display 属性设置为 table-cell，并设置其 height 属性为 100%，则子元素会占据父元素的全部垂直空间。