ページ下部の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

デフォルトのボディは内側の内容ごとに高さをとります。ただ、これは、プロパティを表示するように関連している可能性があり、この

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を追加します。あなたのフッターのCSSでこれを追加しよう：だから

display: block; 

をあなたのフッターCSSは次のようになります。

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

ディスプレイを削除したくない場合は、次のようにします。それを親divでラップしてから、displayプロパティを適用してみてください。

Answer 3

相対的な位置の値をフッタCSSブロックで相対的に変更することができます。絶対的な理由で、その問題が発生している可能性があります。私が間違っているなら、私を訂正してください。