フッターがどこにあるべきかを維持しない

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

あなたはあなたのコードが動作することができ、適切the stacking contextを設定しますhtml要素、のためposition: relativeを設定する必要があります。また、あなたがそれにいる間に、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>