CSS 扩展div到页面底部（仅使用HTML和CSS）

在本文中，我们将介绍如何使用HTML和CSS将div元素扩展到页面的底部。通过一些简单的CSS技巧，我们可以实现这个效果，并在文章的最后给出一个完整的示例。

阅读更多：CSS 教程

实现全屏背景图片

首先，我们需要设置一个全屏的背景图片。这可以通过设置body元素的样式来实现。我们可以使用background-size属性将背景图片调整为全屏大小，并使用background-image属性设置所需的图片。

body {
  background-image: url("背景图片的URL");
  background-size: cover;
}

创建布局容器

为了扩展div元素到页面的底部，我们需要创建一个包含所有内容的布局容器。在这个容器中，我们将使用Flexbox布局来排列和对齐元素。

<body>
  <div class="container">
    <!-- 页面中的内容 -->
  </div>
</body>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

在上述代码中，我们将容器的display属性设置为flex，这使得所有子元素都可以根据我们的要求进行排列。我们还将容器的flex-direction设置为column，这样子元素将按照垂直方向排列。最后，我们设置了容器的最小高度为100vh，以确保容器至少占满整个视口的高度。

扩展div元素

现在，我们可以开始将div元素扩展到页面的底部。为了实现这一点，我们可以使用Flexbox布局的弹性增长属性。

<body>
  <div class="container">
    <div class="content">
      <!-- 页面中的其他内容 -->
    </div>
    <div class="footer">
      <!-- 页面底部的内容 -->
    </div>
  </div>
</body>

.content {
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}

在上述代码中，我们将content的flex-grow属性设置为1，这意味着它将占据剩余空间的所有可用空间。这样，content将扩展到页面的底部。

同时，我们还将footer的flex-shrink属性设置为0，这意味着它不会收缩，而是固定在底部。

完整示例

下面是一个完整的示例，展示了如何使用HTML和CSS将div元素扩展到页面的底部。

<!DOCTYPE html>
<html>
<head>
  <title>扩展div到页面底部</title>
  <style>
    body {
      background-image: url("背景图片的URL");
      background-size: cover;
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .content {
      flex-grow: 1;
      padding: 20px;
    }

    .footer {
      flex-shrink: 0;
      padding: 20px;
      background-color: #f5f5f5;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>这是一个标题</h1>
      <p>这是一些内容</p>
    </div>
    <div class="footer">
      <p>这是页脚</p>
    </div>
  </div>
</body>
</html>

在上述示例中，我们还添加了一些额外的样式，如设置页面的边距和填充，并给页脚添加了背景颜色和居中文本。

通过运行上述代码，您将看到div元素已成功扩展到页面的底部，并且背景图片充满整个视口。