[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに
Post on:2016年6月17日
sponsors
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。
ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づき、翻訳しています。
- 1. ネガティブマージンを使ってフッタを最下部に実装 その1
- 2. ネガティブマージンを使ってフッタを最下部に実装 その2
- 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装
- 4. 高さが不明なフッタを最下部に実装(flexbox)
- 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout)
1. ネガティブマージンを使ってフッタを最下部に実装 その1
フッタ以外のすべての要素をdiv要素で内包し、フッタの高さと等しいマイナスのネガティブマージンを使って、フッタを最下部に表示します。
参考: HTML5 CSS Sticky Footer
HTML
|
1 2 3 4 5 6 7 8 9 |
<body> <div class="wrapper"> コンテンツ <div class="push"></div> </div> <footer class="footer">フッタ</footer> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* フッタの高さと等しいネガティブマージン */ /* また最後の子要素の潜在的なマージンとしても機能 */ margin-bottom: -50px; } .footer, .push { height: 50px; } |
実装のポイントは、コンテンツ内に空の要素(.push)を加えることです。
この空の要素はコンテンツが多い時に、フッタとコンテンツがネガティブマージンで重なってしまうことを回避するものです。空の要素(.push)の高さはフッタと同じ高さに指定します。
Sticky Footer with Negative Margin 1 by Chris Coyier (@chriscoyier)
デモのデフォルト時はコンテンツ量が少ない状態で、フッタを最下部に表示。
「Add Content」ボタンをクリックするとコンテンツが追加されて、成り行き状態になります。
2. ネガティブマージンを使ってフッタを最下部に実装 その2
このテクニックでは空の要素(.push)を必要としない代わりに、ラッパー要素を一つ加えて実装します。追加したラッパー要素にネガティブマージンを指定して、フッタを最下部に表示します。
参考: New CSS Sticky Footer
HTML
|
1 2 3 4 5 6 7 8 |
<body> <div class="content"> <div class="content-inside"> コンテンツ </div> </div> <footer class="footer">フッタ</footer> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; } |
ネガティブマージンを使う1, 2のテクニックでは、ドキュメントとは関係ないHTML要素を加える必要があります。
Sticky Footer with Negative Margins 2 by Chris Coyier (@chriscoyier)
3. そのままのHTMLにcalc()を使ってフッタを最下部に実装
余分なHTML要素を加える必要がない実装方法の一つが、calc()でラッパーの高さを調整する方法です。フッタとコンテンツが重なることもなく、2つの要素が合計で100%の高さになるように積み重なります。
参考: Sticky CSS Footer
HTML
|
1 2 3 4 5 6 |
<body> <div class="content"> コンテンツ </div> <footer class="footer">フッタ</footer> </body> |
CSS
|
1 2 3 4 5 6 |
.content { min-height: calc(100vh - 70px); } .footer { height: 50px; } |
フッタの高さが「50px」で、なぜ「-70px」になっているか不思議に思った人もいるでしょう。これはコンテンツの下に20pxのマージンを与えた値です。
100vhから引き算する値は、フッタの高さにコンテンツの下のマージンを加えた値を指定します。
Sticky Footer with calc(); by Chris Coyier (@chriscoyier)
4. 高さが不明なフッタを最下部に実装(flexbox)
上記3つのテクニックの問題点は、フッタの高さが固定された値であるということです。これはフッタの高さを変更した際に、他のコードも修正する必要が生じます。
フッタの高さが変化する場合は、flexboxを使って、フッタを最下部に表示します。余分な要素も必要としません。
参考: Sticky Footer
HTML
|
1 2 3 4 5 6 |
<body> <div class="content"> コンテンツ </div> <footer class="footer">フッタ</footer> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; } |
flexboxを使ったテクニックでは、ヘッダなどの他の要素を加えることもできます。flexboxで使っている方法はいずれかです。
- 「flex:1;」は、フリーのポジティブなスペースがある場合にそのスペースを満たすようにエリアを確保します。この場合はコンテンツです。
- もしくは「margin-top:auto;」で隣接要素から子要素を押し出します。
flexboxのプロパティの挙動について、更に詳しい情報は下記をご覧ください。
Sticky Footer with Flexbox by Chris Coyier (@chriscoyier)
5. 高さが不明なフッタを最下部に実装(CSS Grid Layout)
最後はCSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、フッタを最下部に表示します。
flexboxと同様に、高さが不明なフッタを最下部に実装できます。
CSS Grid Layoutについて、更に詳しい情報は下記をご覧ください。
HTML
|
1 2 3 4 5 6 |
<body> <div class="content"> コンテンツ </div> <footer class="footer">フッタ</footer> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; } |
2016年6月現在「CSS Grid Layout」を正式にサポートしているブラウザはありませんが、ブラウザの設定を変更することで「CSS Grid Layout」を利用できます。
Sticky Footer with Grid by Chris Coyier (@chriscoyier)
sponsors
