sticky footer というテクニック

やりたいこと

webサイトを作る時に、フッターを設置したいけど、

• 基本的にはコンテンツの一番下に配置
• コンテンツが画面の高さより小さい場合は画面の一番下に固定

というような動作だと美しいですよね。

なにも考えずにただフッターを設置すると、コンテンツが少ない時に気持ち悪くなってしまいます。

↑こんな感じに

これを、「sticky footer」というテクニックを使うと、下のようにできます。

↑良き例

コンテンツが画面の高さを超えるようなときは元の動作になります。

実装

実はこれの実装方法は色々あって、jsで画面高さを取得して調整したり、flexboxを縦向きにして画面いっぱいに広げたりという手もありますが、もっとシンプルに実装できます。

html, body {
  height: 100%;
}
footer {
  position: sticky;
  top: 100vh;
  top: 100dvh;
}

まじでこれだけです。

100dvhとなっているのは、100vhだとiOSのsafariなどで、アドレスバーなどのUIの分の高さが引かれないので、UIを引いた分の実際の表示領域を指定する新しい単位です。

まだ対応してないブラウザもあるため、先に100vhを指定してフォールバックしています。

あとからでも簡単に設定できるので、ぜひ試してみてください！