CSSでフッターをウィンドウ最下部にabsoluteで固定してはダメ

position: absoluteによる固定

2021年6月15日現在「フッター最下部固定」などで検索すると、CSSのposition: absoluteを使用して固定するよう書かれたWebサイトが検索結果に多く表示される。

だが、position: absoluteを使用すると高さを変更しにくくなる問題などが発生するので真似しないほうが良い。

例えば現在検索結果1位に表示されるTechAcademyマガジンの記事にはフッターを下に固定して重なる部分は「footerの高さ分のpadding-bottomを与えます。」と記載されている。

.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 120px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

footer{
    width: 100%;
    background-color: #89c7de;
    color: #fff;
    text-align: center;
    padding: 30px 0;

 position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

しかし、これだとフッターの高さが変更された際にpadding-bottomも修正しなくてはならなくなってしまう。

あと現在はレスポンシブWebデザインが主流だが、これだとパソコンとスマートフォンのフッターの高さが同じになってしまうので都合が悪く実用的ではない。

しかも.wrapperにmin-height: 100vhを指定して高さを確保しているため、画面の高さによっては無駄な余白が多く発生する。

TechAcademyマガジンフッター固定サンプル

さらにフッターの高さがテキストの追加などで変わるとブラウザのウィンドウの高さが足りない場合は.wrapper部分と重なってしまう。

TechAcademyマガジンフッター固定サンプル(複数行)

bodyにflexを追加でフッター固定

前述の問題はbodyにflexを追加してflex-direction: column;を追加すればposition: absolute;を指定しなくても実装できる。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
  padding: 30px 0;
  background: #89c7de;
  color: #fff;
  text-align: center;
}

フッター固定サンプル(flex使用)

このやり方であればフッターの高さがテキストの追加などで変わっても他のコンテンツ部分と重なる心配がない。

フッター固定サンプル(複数行バージョン)