位於頁面底部的CSS位置頁腳

Question

我試圖將頁腳位置放在頁面的底部，但不粘。當沒有足夠的內容來覆蓋屏幕高度時，我遇到問題，那麼頁腳不在底部。我試圖用CSS來設置它：

body { 
    position: relative; 
    margin: 0; 
    padding-bottom: 8rem; 
    min-height: 100%; 
    overflow-x: hidden; 
} 

footer { 
    position: absolute; 
    display: flex; 
    align-items: center; 
    height: 4rem; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: $gray; 
} 

這個頁腳只在頁面底部有足夠的內容。但是，當沒有足夠的內容時，它就會在底部之上。這裏是例子：

Here是小提琴。

當我添加CSS文件，如建議的答案：

html, body { 
    height: 100%; 
} 

然後，我有一個頁面的問題，其中有很多的內容，然後頁腳在頁面加載底部，但是當我開始向下滾動時，它會隨內容一起上升，如圖所示：

Answer 1

默認身體根據內容獲取身高。只需添加下面的CSS此

html, body { 
    height: 100%; 
} 

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    min-height: 100%; 
 
    overflow-x: hidden; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 4rem; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: $gray; 
 
    background: red; 
 
}

<footer>Footer Container</footer>

Answer 2

這可能顯示屬性有關：嘗試在您的頁腳的CSS補充一點：

display: block; 

讓你的頁腳css變成：

footer { 
    position: absolute; 
    display: block; 
    align-items: center; 
    height: 4rem; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: $gray; 
} 

如果你不想擺脫顯示：flex;然後嘗試將其包裝在任何父級div中，然後應用display屬性。

Answer 3

在頁腳的CSS塊中將位置值更改爲相對位置。可能是因爲絕對，您正在解決該問題。糾正我，如果我錯了。