CSS 让div粘附在页面底部

在本文中，我们将介绍如何使用CSS让一个div元素粘附在页面底部。在网页设计中，有时候我们需要将一些内容固定在页面底部，例如网页的页脚或者弹窗提示框。下面我们将通过具体的示例来说明如何实现这个效果。

阅读更多：CSS 教程

使用绝对定位

一种常见的方法是使用CSS的绝对定位属性。我们可以通过设置position: absolute和bottom: 0来将一个div元素粘附在页面底部。下面是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh; /* 设置body高度为视口高度，确保整个页面能够占满屏幕 */
      }

      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #f1f1f1;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <!-- 页面内容 -->
    </div>

    <div class="footer">
      <!-- 底部内容 -->
    </div>
  </body>
</html>

在这个示例代码中，我们给body设置了高度为视口高度100vh，确保整个页面能够占满屏幕。然后我们使用绝对定位将底部div元素固定在页面底部，通过设置bottom值为0，让元素紧贴底部边缘。注意，为了避免底部内容与页面内容重叠，我们添加了一个padding值。

使用flex布局

另一种常用的方法是使用CSS的flex布局。我们可以通过将页面内容用一个flex容器包裹，并将底部div元素放在容器的最后一个子元素，实现将底部div粘附在页面底部的效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* 设置body最小高度为视口高度，确保整个页面能够占满屏幕 */
      }

      .content {
        flex: 1; /* 设置内容容器的flex属性为1，使其占满可用空间 */
      }

      .footer {
        height: 50px;
        background-color: #f1f1f1;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <!-- 页面内容 -->
      </div>

      <div class="footer">
        <!-- 底部内容 -->
      </div>
    </div>
  </body>
</html>

在这个示例代码中，我们给body设置了flex布局，并将其flex方向设置为垂直方向（column）。然后我们将页面内容放在一个容器div中，并将该容器的flex属性设置为1，使其占满可用空间。最后，我们将底部div元素放在容器的最后一个子元素，由于flex布局的特性，底部div会自动粘附在页面底部。

使用sticky定位

除了绝对定位和flex布局之外，CSS还提供了一个sticky定位属性，可以轻松实现将div粘附在页面底部的效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
        min-height: 100vh; /* 设置body最小高度为视口高度，确保整个页面能够占满屏幕 */
      }

      .footer {
        position: sticky;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #f1f1f1;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <!-- 页面内容 -->
    </div>

    <div class="footer">
      <!-- 底部内容 -->
    </div>
  </body>
</html>

在这个示例代码中，我们简单地将底部div元素的定位属性设置为sticky，并将其bottom值设置为0。这样底部div元素将会在其所在容器的可视范围内粘附在页面底部。