<div>是 HTML 中最常用的元素之一，用于在网页中划分和组织内容。CSS 可以用来控制<div>元素的样式，包括其位置、大小、颜色等。其中一个常见的需求是将<div>元素固定在页面底部，使其始终位于页面的底端。本文将介绍几个实现这一效果的常用方法，并提供对应的代码案例。
一种常见的方法是使用绝对定位。通过设置<div>元素的`position`属性为`absolute`，再将其`bottom`属性设置为0，可以将<div>元素固定在页面的底端。下面是一个示例代码：

<style>
.bottom-div {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
text-align: center;
line-height: 50px;
}
</style>
<div class="bottom-div">
这是一个固定在底部的<div>元素
</div>

在上面的代码中，我们定义了一个类名为`bottom-div`的样式规则。使用这个类名来应用这个样式规则的<div>元素将会固定在页面的底端。在样式规则中，我们将`position`属性设为`absolute`，表示绝对定位。`bottom`属性被设置为0，表示与页面的底边距离为0。我们还设置了<div>元素的宽度、高度、背景颜色、文本居中和行高等样式。
另一种方法是使用 Flexbox 布局。Flexbox 是 CSS3 中引入的一种布局模式，可以方便地实现页面的响应式布局和各种复杂的布局效果。下面是一个使用 Flexbox 实现底部固定的<div>元素的示例代码：

<style>
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
.bottom-div {
flex-shrink: 0;
height: 50px;
background-color: #f5f5f5;
text-align: center;
line-height: 50px;
}
</style>
<div class="container">
<div class="content">
这里是页面的内容区域
</div>
<div class="bottom-div">
这是一个固定在底部的<div>元素
</div>
</div>

在上面的代码中，我们定义了一个类名为`container`的样式规则。这个样式规则将页面分为两个部分：内容区域和底部<div>元素。通过将`display`属性设为`flex`，我们将`container`元素变为一个 Flexbox 容器。`min-height`属性被设为`100vh`，确保内容区域至少占满整个可视区域的高度。`flex-direction`属性设为`column`，表示容器内元素按垂直方向排列。
接下来，我们定义了类名为`content`的样式规则，将其`flex`属性设为1。这样，内容区域将会占据剩余的空间。
最后，我们定义了类名为`bottom-div`的样式规则，将其`flex-shrink`属性设为0，确保它不会缩小。我们还设置了<div>元素的高度、背景颜色、文本居中和行高等样式。
以上是两种常用的方法，可以将<div>元素固定在页面的底端。根据实际需求和情况，你可以选择适合的方法来实现这一效果。希望本文对你有所帮助！</div>