如何在沒有絕對定位的情況下在 CSS 中創建黏性頁腳？

如何使用 CSS 建立響應式頁腳

將頁腳維護在頁面底部是常見的網頁設計要求。然而，一些用戶在使用「絕對」定位屬性時遇到困難。本文將引導您完成正確的 CSS 實現，以在不破壞佈局的情況下實現黏性頁腳效果。

問題背景

嘗試修復頁腳位置失敗的使用者通常應用了以下程式碼：

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

建議的解決方案

在不使用在插件或其他HTML 的情況下解決問題元素，請按照以下步驟操作：

1. 將以下CSS規則加入樣式表：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. 確保「body {margin}」中指定的高度" 符合頁腳元素的實際高度（例如，100px)。

注意：建議使用HTML 元素ID「#bottom-footer」進行定位，而不是「footer #bottom-footer”，因為後者可能與您原來的 CSS 樣式衝突.

以上是如何在沒有絕對定位的情況下在 CSS 中創建黏性頁腳？的詳細內容。更多資訊請關注PHP中文網其他相關文章！