頁腳不會留在它應該在哪裏

Question

我想在我的網站的底部做一​​個頁腳，而且我確實做了但不留在我想要的位置。我使用的原始CSS代碼是這樣的：

background-color: rgba(0, 0, 0, 0.7); 
border: 2px solid black; 
border-radius: 5px; 
padding: 10px; 
width: 1270px; 
position: absolute; 
color: white; 
bottom: 0px; 
display: block; 
font-size: smaller; 
text-align: center; 

但是每當有人發送評論時，我的頁面高度就會增加。所以我知道這裏有什麼問題。當我添加bottom：0px時，它始終保持在0px，但是當頁面的高度增加時，頁腳停留在那裏。當我改變位置：固定的，這是有效的，但當我向上/向下滾動時，頁腳會超過註釋，但我希望它始終保持在最下面。當我刪除定位時，它會執行這個技巧，它總是停留在頁面的底部，但是它會導致將背景顏色，邊框，邊框半徑等應用於所有頁面，我不希望發生這種情況。我希望代碼僅適用於頁腳。

我想聽聽一些建議。已經謝謝你了！

編輯！這裏是影響頁腳的CSS的其餘部分;

h1, .h1 { 
 
    font-size: 39px; 
 
} 
 
darkly.min.css:14 
 
h1, .h1, h2, .h2, h3, .h3 { 
 
    margin-top: 0; 
 
    margin-bottom: 10.5px; 
 
} 
 
darkly.min.css:14 
 
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
 
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-weight: 400; 
 
    line-height: 1.1; 
 
    color: inherit; 
 
} 
 
darkly.min.css:14 
 
h1 { 
 
    font-size: 2em; 
 
    margin: 0.67em 0; 
 
} 
 
darkly.min.css:14 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
user agent stylesheet 
 
h1 { 
 
    display: block; 
 
    font-size: 2em; 
 
    -webkit-margin-before: 0.67em; 
 
    -webkit-margin-after: 0.67em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    font-weight: bold; 
 
} 
 
Inherited from body 
 
darkly.min.css:14 
 
body { 
 
    font-family: "Source Sans Pro",sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: white; 
 
    background-attachment: fixed; 
 
    background-image: url(https://steamuserimages-a.akamaihd.net/ugc/491274240789482793/1CEE148DBE320A9367BCDF5211AE077E695A4CFE/); 
 
    text-transform: lowercase; 
 
    margin: 0 auto; 
 
    width: 1280px; 
 
} 
 
Inherited from html 
 
darkly.min.css:14 
 
html { 
 
    font-size: 10px; 
 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
 
} 
 
darkly.min.css:14 
 
html { 
 
    font-family: sans-serif; 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-text-size-adjust: 100%; 
 
} 
 
Pseudo ::before element 
 
darkly.min.css:14 
 
*:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
Pseudo ::after element 
 
darkly.min.css:14 
 
*:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box;

Answer 1

您應該設置position: relative爲html元素，將設置the stacking context得當，讓你的代碼工作。你也應該爲它設置min-height: 100%。我在下面創建了一個簡單的測試器，當你點擊按鈕時，它會改變內容的高度。試試看，讓我知道你對它的感受！

var height = 100; 
 

 
function updateHeight() { 
 
    if (height >= 100) 
 
    height = (50 * Math.random()); 
 
    else 
 
    height = (75 + 50 * Math.random()); 
 
    document.getElementById("variable-height").setAttribute('style', 'height: ' + height + 'vh'); 
 
}

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
footer { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    width: 1270px; 
 
    position: absolute; 
 
    color: white; 
 
    bottom: 0px; 
 
    display: block; 
 
    font-size: smaller; 
 
    text-align: center; 
 
}

<div id="variable-height" style="height: 100vh;"> 
 
    <button onclick='updateHeight()'>Click me to test!</button></div> 
 
<footer>Footer</footer>