CSSでフッターをウィンドウ下部かページ最下部に表示する

CSSでフッターをウィンドウ下部に表示する。(ページの高さが1ページない時も下に張り付いたままにする。高さが1ページ以上あるときはページの一番下に配置する。)

方針

ページのスクロール中は表示させない。基本的にはページの最下部に表示させる。ページのheightがウィンドウより小さいときは、ウィンドウ最下部に張り付かせる。

フッターの要素をposition:absolute; left: 0; bottom:0; height: 200pxにして、ページ最下部に固定する。

そして、bodymargin-bottom: 200px;を指定して、フッターの高さの分だけページ下部にスペースを確保する。

あとはposition:absoluteが有効になるように、htmlposition:relativeを指定する。 また、ページの最小の高さを100%にする。

これでOK。

実装

CSSで書いておくと後から見やすいので残しておく。フッターの高さは確実に同じ値になるようにカスタムプロパティを使った方がいい。

:root {
    --footer-height: 5rem;
}

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

body {
    margin-bottom: var(--footer-height);
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--footer-height);
    width: 100%;
    color: #white;
    background: #black;
    text-align: center;
}

短所

この方法だと、htmlposition:relativeでないといけないので、他の指定が欲しいときは異なる方法を使う必要がある。bodyの指定もしないといけない。

長所

CSSだけの少なめの指定で実現できる。フッター分だけページを下に伸ばすイメージをすると、実装も楽。

以上です。

タイトルとURLをコピーしました