スティッキーフッター

このページのコンテンツを隠すために、以下のボタンをクリックしてください。十分にページを埋めるほどのコンテンツがない場合でも、ウィンドウの下部にフッターが固定されることに注目してください。

「十分なコンテンツがないページの下部に、フッターを固定する」という問題には、おおよそ全てのWeb開発者がキャリアの中で取り組んだことでしょう。大体の部分において、それは解決済みの問題です。すでに存在する解決方法の全ては、明白な欠点を抱えています — フッターの高さが不明ならば動作しないのです。

Flexboxはこの種の問題に完璧にフィットします。Flexboxは水平方向のコンテンツレイアウトでよく知られていますが、実際のところ、垂直方向のレイアウトに関する問題に対しても同様に役立ちます。垂直なセクションをflexコンテナの中に包み込み、どのセクションを伸縮させるかを選ぶ、たったそれだけでいいのです。それらのセクションは、コンテナ内のスペースを自動的に全て占有します。

下記の例では、コンテナはwindowの高さに設定されており、コンテンツエリアは必要に応じて拡張するように設定されています。（注意：水平方向の場合は自動的に拡張しましたが、それと異なり、垂直方向の場合はコンテナに高さを指定する必要があります。）

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

デモで利用しているSiteコンポーネントの完全なソースはGithubにあります。