CSS 如何使一个DIV块即使没有内容也能延伸到页面底部

在本文中，我们将介绍如何使用CSS使一个DIV块延伸到页面底部，即使它没有内容。

阅读更多：CSS 教程

1. 通过设置高度为100%

要使一个DIV块延伸到页面底部，我们可以通过设置其高度为100%实现。通过使用CSS的height属性，我们可以将DIV块的高度设置为相对于其父元素或视口的100%。

示例代码如下：

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

.container {
  height: 100%;
  background-color: blue;
}

在上面的示例中，我们首先将HTML和BODY元素的高度设置为100%，以确保它们铺满整个页面。接下来，我们设置容器DIV块的高度为100%，这样它就会延伸到页面的底部。

2. 使用flex布局

另一种常用的方法是使用flex布局。Flex布局是CSS3中引入的一种灵活的布局方式，它可以使元素自动调整大小以适应容器的大小。

示例代码如下：

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

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: blue;
}

在上面的示例中，我们首先将HTML和BODY元素的高度设置为100%，以确保它们铺满整个页面。然后，我们将容器DIV块的display属性设置为flex，以启用flex布局。接下来，我们将容器DIV块的flex-direction属性设置为column，以使其子元素垂直排列。最后，我们将容器DIV块的min-height属性设置为100%，这样它就会延伸到页面的底部。

3. 使用绝对定位

另一种方法是使用绝对定位。通过使用CSS的position属性，我们可以将DIV块定位在页面的底部。

示例代码如下：

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

.container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: blue;
}

在上面的示例中，我们首先将HTML和BODY元素的高度设置为100%，以确保它们铺满整个页面。然后，我们将HTML和BODY元素的position属性设置为relative，以确保容器DIV块相对于它们进行定位。接下来，我们将容器DIV块的position属性设置为absolute，将其放置在页面的底部。我们还通过设置left: 0和bottom: 0，使容器DIV块紧贴页面的左下角。最后，我们将容器DIV块的宽度设置为100%。

4. 使用网格布局

还有一种方法是使用CSS的网格布局。通过使用CSS的display: grid属性，我们可以创建一个网格，将元素放置在网格中的特定位置。

示例代码如下：

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

.container {
  grid-area: 1 / 1 / -1 / -1;
  background-color: blue;
}

在上面的示例中，我们将HTML和BODY元素的高度设置为100%，以确保它们铺满整个页面。然后，我们将HTML和BODY元素的display属性设置为grid，以启用网格布局。接下来，我们使用grid-area属性将容器DIV块放置在网格中。其中1 / 1 / -1 / -1表示将容器放置在网格的第一行第一列，以及倒数第一行和倒数第一列之间的区域。最后，我们为容器DIV块设置背景颜色。