<div bottom buqi> 是一個 CSS 布局技術，它可以實現在不使用絕對定位的情況下，將元素固定在頁面的底部。通過使用該技術，我們可以輕松地創建一個具有粘性底部的布局，即無論內容多少，底部元素都會始終保持在視窗底部。
下面將通過幾個代碼案例來詳細解釋說明 "div bottom buqi" 的使用。
案例1: 固定底部欄 假設我們要創建一個頁面，其中內容區域根據頁面高度自動伸縮，并且底部欄始終固定在頁面的底部。我們可以使用 "div bottom buqi" 技術來實現此效果。
HTML 代碼示例：

<div class="wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error.</p>
</div>
<div class="footer">
<p>底部欄內容</p>
</div>
</div>

CSS 代碼示例：

.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
<br>
.content {
flex-grow: 1;
}
<br>
.footer {
flex-shrink: 0;
}

在上面的代碼中，我們使用了min-height: 100vh;來確保容器至少占滿整個視窗高度。display: flex;和flex-direction: column;使.wrapper容器按垂直方向進行布局。.content設置了flex-grow: 1;，使其在內容不足時自動拉伸填充剩余空間。.footer設置了flex-shrink: 0;，使其固定在底部。
案例2: 底部固定按鈕 現在，我們想在頁面的底部添加一個固定的按鈕，無論內容如何改變，按鈕都會始終保持在頁面底部。我們可以使用 "div bottom buqi" 技術來實現此效果。
HTML 代碼示例：

<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error.</p>
</div>
<div class="btn-container">
<button class="btn">固定按鈕</button>
</div>
</div>

CSS 代碼示例：

.container {
position: relative;
min-height: 100vh;
}
<br>
.content {
margin-bottom: 60px;
}
<br>
.btn-container {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
<br>
.btn {
width: 100%;
height: 100%;
}

在上面的代碼中，我們將.container容器設置為相對定位，并指定min-height: 100vh;來確保容器至少占滿整個視窗高度。.content的margin-bottom: 60px;用于為底部按鈕留出空間。.btn-container設置為絕對定位，并使用bottom: 0;將其固定在底部。.btn設置了寬度和高度為 100%，使其與.btn-container容器同寬、同高。
通過以上兩個案例的演示，我們可以清楚地理解 "div bottom buqi" 技術的應用。無論是固定底部欄還是底部按鈕，它們都可以通過這一技術實現在頁面底部的固定位置。