[CSS] footer要素を最下部に固定する方法

2 min read

コンテンツ部分の高さがウィンドウサイズよりも小さくてフッターが浮いてしまう問題。

これまでの方法

レガシーブラウザにも対応するなら、「Sticky Footer Template for Bootstrap」でも紹介されているような手法を使わざるを得ない。

コードは以下の様な感じ。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

ビューポートを使う

<main></main>
<footer></footer>
例えば上記の様な並びだった場合は、以下のようにすれば良い。
main {
  min-height: 100vh;
}

vhビューポートの高さに対する割合を設定できる。
これでコンテンツ要素が小さくても確実に高さが担保できる。綺麗に調整したい場合は、calc(100vh - フッターの高さ)などする必要がある(margin も考慮する必要あり)。

IE9 から対応なのでそこそこのモダンブラウザであれば使うことができる。

Next Read

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

CSSのborder-radiusではiOSのアイコンの角丸は表現できない

ウェブフロントエンドの CSS で再現する方法 / 参考