<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>
<br>
<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;
}
<br>
  .content {
flex: 1;
}
<br>
  .bottom-div {
flex-shrink: 0;
height: 50px;
background-color: #f5f5f5;
text-align: center;
line-height: 50px;
}
</style>
<br>
<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>