如何将 div 保留在页面底部

很多时候，我们需要将一个 div 元素保留在页面底部，这是一种常见的需求。下面介绍几种实现的方法。

使用 flex 布局

使用 flex 布局是一种比较简单的方法，只需设置容器的 flex 属性以及子元素的 flex-grow 属性即可。以下是一个例子：

<div class="container">
  <div class="content">内容</div>
  <div class="footer">底部</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}
</style>

在上面的例子中，设置了容器的高度为 100vh ，也就是整个浏览器窗口的高度，然后使用 flex 布局将内容和底部固定在容器的顶部和底部。通过给内容的 flex-grow 属性设置为 1，容器会将多余的空间全部分配给内容，底部则不会随着内容的增加而上升。

使用绝对定位

使用绝对定位也是一种实现的方法，这种方法比较灵活，可以适用于任何布局。以下是一个例子：

<div class="container">
  <div class="content">内容</div>
  <div class="footer">底部</div>
</div>

<style>
.container {
  position: relative;
  height: 100vh;
}

.content {
  height: calc(100vh - 50px);
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}
</style>

在上面的例子中，容器和内容的高度都设置为 100vh ，然后底部使用绝对定位固定在容器的底部。通过给内容的高度设置为 calc(100vh - 50px)，底部则会固定在内容的下面。

使用 Sticky Footer

使用 Sticky Footer 是一种常用的方法，它可以将底部固定在页面的底部，而且不会遮挡其他元素。以下是一个例子：

<div class="container">
  <div class="content">内容</div>
</div>
<div class="footer">底部</div>

<style>
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  min-height: 100%;
}

.content {
  padding-bottom: 50px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}
</style>

在上面的例子中，容器和内容的高度都设置为 100% ，然后底部使用 Sticky Footer 原理固定在页面的底部，通过给内容的 padding-bottom 属性设置为底部的高度，可以避免底部遮挡内容。

以上是三种常见的实现方法，可以根据不同的需求选择不同的方法。