[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに

高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。

ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。

フッタを最下部に表示する5つの方法 -コンテンツ量が少ない時は最下部に、多い時は成り行きに

Sticky Footer, Five Ways

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づき、翻訳しています。

1. ネガティブマージンを使ってフッタを最下部に実装 その1

フッタ以外のすべての要素をdiv要素で内包し、フッタの高さと等しいマイナスのネガティブマージンを使って、フッタを最下部に表示します。
参考: HTML5 CSS Sticky Footer

HTML

CSS

実装のポイントは、コンテンツ内に空の要素(.push)を加えることです。
この空の要素はコンテンツが多い時に、フッタとコンテンツがネガティブマージンで重なってしまうことを回避するものです。空の要素(.push)の高さはフッタと同じ高さに指定します。

デモのデフォルト時はコンテンツ量が少ない状態で、フッタを最下部に表示。
「Add Content」ボタンをクリックするとコンテンツが追加されて、成り行き状態になります。

2. ネガティブマージンを使ってフッタを最下部に実装 その2

このテクニックでは空の要素(.push)を必要としない代わりに、ラッパー要素を一つ加えて実装します。追加したラッパー要素にネガティブマージンを指定して、フッタを最下部に表示します。
参考: New CSS Sticky Footer

HTML

CSS

ネガティブマージンを使う1, 2のテクニックでは、ドキュメントとは関係ないHTML要素を加える必要があります。

3. そのままのHTMLにcalc()を使ってフッタを最下部に実装

余分なHTML要素を加える必要がない実装方法の一つが、calc()でラッパーの高さを調整する方法です。フッタとコンテンツが重なることもなく、2つの要素が合計で100%の高さになるように積み重なります。
参考: Sticky CSS Footer

HTML

CSS

フッタの高さが「50px」で、なぜ「-70px」になっているか不思議に思った人もいるでしょう。これはコンテンツの下に20pxのマージンを与えた値です。
100vhから引き算する値は、フッタの高さにコンテンツの下のマージンを加えた値を指定します。

4. 高さが不明なフッタを最下部に実装(flexbox)

上記3つのテクニックの問題点は、フッタの高さが固定された値であるということです。これはフッタの高さを変更した際に、他のコードも修正する必要が生じます。

フッタの高さが変化する場合は、flexboxを使って、フッタを最下部に表示します。余分な要素も必要としません。
参考: Sticky Footer

HTML

CSS

flexboxを使ったテクニックでは、ヘッダなどの他の要素を加えることもできます。flexboxで使っている方法はいずれかです。

  • 「flex:1;」は、フリーのポジティブなスペースがある場合にそのスペースを満たすようにエリアを確保します。この場合はコンテンツです。
  • もしくは「margin-top:auto;」で隣接要素から子要素を押し出します。

flexboxのプロパティの挙動について、更に詳しい情報は下記をご覧ください。

5. 高さが不明なフッタを最下部に実装(CSS Grid Layout)

最後はCSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、フッタを最下部に表示します。
flexboxと同様に、高さが不明なフッタを最下部に実装できます。

CSS Grid Layoutについて、更に詳しい情報は下記をご覧ください。

HTML

CSS

2016年6月現在「CSS Grid Layout」を正式にサポートしているブラウザはありませんが、ブラウザの設定を変更することで「CSS Grid Layout」を利用できます。

top of page

©2017 coliss