一種常見的佈局技術，通常稱為粘性頁腳，過去使用較舊的 CSS 很難做到，但現在是如何使用 CSS 創建粘性頁腳。粘性頁腳是一種無論用戶向下滾動頁面多遠都保持固定並在屏幕底部可見的頁腳。理論上，粘性頁腳的位置永遠不會改變，應該始終出現在用戶屏幕上。
使用 CSS 創建粘性頁腳實際上非常簡單，主要是將頁腳的位置屬性設置為固定。看看下面的代碼，看看它是如何完成的。在此示例中，頁腳的 ID 為#sticky-footer。
粘性頁腳是網頁的頁腳，當內容比視口短時，它會粘在視口底部高度。這使我們能夠輕鬆地瀏覽網站，並且可以使用 CSS 創建。
創建 HTML
具有以下類名的元素:“content”和“push”。添加一個類名為“footer”的元素。
添加 CSS
為 和 元素指定高度和邊距屬性。將 padding、min-height 和 margin 屬性添加到“content”類。將 height 屬性設置為等於負邊距。
什麼是粘性頁腳?
頁腳是網頁底部的信息。在傳統網站上，訪問者會向下滾動以查看網頁底部頁腳中的信息。但是對於粘性頁腳（也稱為固定頁腳），該信息始終顯示在訪問者網絡瀏覽器的底部，即使訪問者向下滾動也是如此。您不必到頁面底部就能看到它。
例如，預訂櫃檯團隊發現，在網站上突出顯示聯絡中心電話號碼會增加訂單，因此他們確保它顯示在移動訪問者的粘性頁腳中。
下圖來自文章“轉化率優化案例研究:旅遊網站如何在一年內將其網站轉化率提高一倍”，其中指出電話號碼列在移動網站上。頁面底部的電話號碼列在粘性頁腳中。
FAQ
粘性頁腳 CSS 是什麼?
粘性頁腳模式是一種在內容短於視口高度的情況下，頁面的頁腳“粘”在視口底部。
如何在 CSS 中使頁腳觸及頁面底部?
您可以使用 flexbox 來確保頁腳始終位於頁面底部。這是通過設置 body 元素 min-height: 100vh , display: flex 和 flex-direction: column 來完成的。
Sticky footer 和 fixed footer 一樣嗎?
On a在傳統網站中，訪問者會向下滾動以查看網頁底部頁腳中的信息。但是，使用粘性頁腳（有時稱為固定頁腳），當訪問者向下滾動時，信息始終顯示在訪問者 Web 瀏覽器的底部。