CSSでフッターをウィンドウ下部に表示する。(ページの高さが1ページない時も下に張り付いたままにする。高さが1ページ以上あるときはページの一番下に配置する。)
方針
ページのスクロール中は表示させない。基本的にはページの最下部に表示させる。ページのheight
がウィンドウより小さいときは、ウィンドウ最下部に張り付かせる。
フッターの要素をposition:absolute; left: 0; bottom:0; height: 200px
にして、ページ最下部に固定する。
そして、body
のmargin-bottom: 200px;
を指定して、フッターの高さの分だけページ下部にスペースを確保する。
あとはposition:absolute
が有効になるように、html
でposition: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;
}
短所
この方法だと、html
がposition:relative
でないといけないので、他の指定が欲しいときは異なる方法を使う必要がある。body
の指定もしないといけない。
長所
CSSだけの少なめの指定で実現できる。フッター分だけページを下に伸ばすイメージをすると、実装も楽。
以上です。