CSS的div沉底是指在網頁中使用CSS樣式控制div元素置于容器的底部。通過設置div的position、bottom和width屬性，我們可以輕松實現這一效果。接下來將通過幾個代碼案例來詳細解釋和說明CSS的div沉底效果。
第一個案例是通過設置position:absolute，bottom:0和width:100%屬性，將div元素置于容器的底部。代碼如下：

<div class="container">
<div class="bottom-div">
這是一個演示div沉底效果的案例。
</div>
</div>
<br>
<style>
.container {
position: relative;
height: 300px;
border: 1px solid #ccc;
}
<br>
.bottom-div {
position: absolute;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
}
</style>

在上述代碼中，我們在外層容器div上設置了position:relative和height屬性，使其成為相對定位的容器。然后，我們在內部div上設置了position:absolute、bottom:0和width:100%屬性，使其相對于容器的底部進行絕對定位。通過這樣的設置，div元素就會沉底顯示。
第二個案例是通過設置position:fixed，bottom:0和width:100%屬性，將div元素固定在瀏覽器窗口的底部。代碼如下：

<div class="bottom-div">
這是一個演示div沉底效果的案例。
</div>
<br>
<style>
.bottom-div {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
}
</style>

在上述代碼中，我們在div元素上直接設置了position:fixed、bottom:0和width:100%屬性。通過這樣的設置，div元素將會固定在瀏覽器窗口的底部，無論滾動條如何滾動，div元素始終沉底顯示。
第三個案例是通過設置position:relative和margin-top:auto屬性，將div元素置于容器的底部。代碼如下：

<div class="container">
<div class="bottom-div">
這是一個演示div沉底效果的案例。
</div>
</div>
<br>
<style>
.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
<br>
.bottom-div {
margin-top: auto;
background-color: #f1f1f1;
}
</style>

在上述代碼中，我們在外層容器div上設置了position:relative、display:flex、flex-direction:column、justify-content:flex-end和align-items:center屬性，使其成為一個flex布局容器，并將內容垂直居中顯示。然后，我們在內部div上設置了margin-top:auto屬性，讓div元素的margin-top值自動填充剩余空間，從而將其置于容器的底部。
通過以上幾個案例，我們可以看到，通過簡單的CSS樣式設置，我們可以輕松實現div元素的沉底效果。這種布局方式在網頁設計中經常被應用，可以使頁面更加美觀和合理。所以，在實際開發中，我們可以根據具體需求選擇合適的案例來實現div沉底效果。