<div> 局底部是指將一個元素置于頁面的底部位置。在網頁布局中，通常有以下幾種方法實現 div 局底部的效果。
一、使用絕對定位（absolute positioning）： 通過設置 div 元素的 position 屬性為 absolute，并將底部位置設置為 0，可以將該 div 元素置于頁面底部。

<style>
.bottom-div {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #f1f1f1;
}
</style>
<div class="bottom-div">
這個 div 在頁面底部。
</div>

二、使用固定定位（fixed positioning）： 通過設置 div 元素的 position 屬性為 fixed，并將底部位置設置為 0，可以將該 div 元素相對于瀏覽器窗口固定在頁面底部。

<style>
.bottom-div {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #f1f1f1;
}
</style>
<div class="bottom-div">
這個 div 在頁面底部。
</div>

三、使用 Flexbox 布局： 使用 Flexbox 布局可以輕松實現 div 元素置于頁面底部的效果。通過設置父容器的 display 屬性為 flex，并將 justify-content 屬性設置為 flex-end，可以將子元素置于容器的底部。

<style>
.container {
display: flex;
justify-content: flex-end;
height: 100vh;
}
.bottom-div {
background-color: #f1f1f1;
}
</style>
<div class="container">
</div>
<div class="bottom-div">
這個 div 在頁面底部。
</div>
</div>

四、使用 CSS Grid 布局： 通過使用 CSS Grid 布局可以將 div 元素置于底部。設置父容器的 display 屬性為 grid，并使用 grid-template-rows 屬性創建一個自適應的行，最后將 div 元素放置在該行上。

<style>
.container {
display: grid;
grid-template-rows: auto 1fr;
height: 100vh;
}
.bottom-div {
background-color: #f1f1f1;
grid-row-start: 2;
}
</style>
<div class="container">
<div>自適應的內容區域</div>
<div class="bottom-div">
這個 div 在頁面底部。
</div>
</div>

：通過以上介紹的方法，可以輕松地將一個 div 元素置于頁面的底部位置。無論是使用絕對定位、固定定位、Flexbox 布局，還是 CSS Grid 布局，都可以實現該效果。開發者可以根據項目實際需求和布局結構選擇合適的方法實現 div 局底部。