web-dev-qa-db-ja.com

フターをページの一番下に固定する方法は?

私は、サイトのフッターが常にサイトの下部に収まるようにする必要があります。

現在のところ、ページにコンテンツがある場合はサイトの下部に表示されますが、ページにコンテンツがない場合は、この画像に表示されているように表示ページの下部から中央まで表示されます。

Footer in the middle of the screen

私は自分の質問に答えることができ、発見プロセスを以下に投稿しました:

4
Kelly

簡単な検索でこの質問が何度も質問され答えられたことがわかります。

StackOverflowより: フッターをページの一番下に正しく貼り付ける

StackOverflowより: フッターをWebページの一番下に固定する方法

CSS-Tricksより: スティッキーフッターを作成する5つの方法

コードペンから: 「常に一番下に」フッタ

WordPressより: フッターを画面の下部に固定する方法は?

私は私の答えにWordPressの答えを使いました:

.site-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
}

Footer properly stuck to site floor.

6
Kelly

フッターにCSSを追加すると、フッターの位置がページの下部に固定されます。

    .site-footer{
     position:fixed;
     bottom:0px;
     left:0px;
     right:0px;
     width:100%;
    }
2
HeroWeb512