特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
※ブラウザによっては実装できない場合もあるので、使用する際は対応ブラウザで問題ないか確認の上使用してください。
※プレフィックスは省略しているので、必要があれば各自で追記してください。
1. absoluteを使う
以前から使われることが多いフッターをposition: absolute;で配置する方法で、基本的にはよく見る方法とほとんど変わらないです。
ここではサンプルとして以下のようなHTMLを使用します。
HTML
<html>
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
<!-- ここをウィンドウ下部に表示させたい -->
</footer>
</body>
</html>上記のようなHTMLがあるとき、CSSを以下のように記述することでfooter要素をコンテンツ量に関係なくウィンドウ下部に表示させることができます。
CSS
html {
position: relative;
min-height: 100%;
padding-bottom: 100px;
box-sizing: border-box;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
}説明が少し前後しますが、まずfooterはposition: absolute;を使用してウィンドウ下部に表示されるようにしておき、heightでフッターコンテンツの高さを指定しておきます。
次にhtmlにはmin-height: 100%;を使って高さの最小を100%に指定しつつ、フッターコンテンツの高さと同じ数値のpadding-bottomを指定してコンテンツがフッター下に隠れてしまわないようにしておきます。
あとはpadding-bottomの値も高さに含めてほしいのでbox-sizing: border-box;を記述すれば、フッターをウィンドウ下部に表示させることができるようになります。
実際の表示は以下デモで確認でき、コンテンツ内容が長くても短くてもフッターコンテンツはウィンドウ下部に表示されているのを確認できると思います。
※デモでは初期表示でコンテンツ量が短い場合の見栄え、中央のボタンをクリックすることでコンテンツ量が長くなった場合の見栄えをそれぞれ確認できるようになっています。
2. calcを使う
上で紹介したものと同様でfooterに高さを指定する必要があり、さらにHTMLを少し追記する可能性が出てくるの部分がいまいちなのですが、その代わり（？）calcを利用することで先ほどのものよりもシンプルなCSSで実装することができます。
ここではサンプルとして以下のようなHTMLを使用します。
HTML
<html>
<body>
<div class="wrapper">
<header>
...
</header>
<main>
...
</main>
</div>
<footer>
<!-- ここをウィンドウ下部に表示させたい -->
</footer>
</body>
</html>上記のようなHTMLがあるとき、CSSを以下のように記述することでfooter要素をコンテンツ量に関係なくウィンドウ下部に表示させることができます。
CSS
.wrapper {
min-height: calc(100vh - 100px);
}
footer {
height: 100px;
}先述したようにこちらもfooterは高さを指定する必要があるので、heightで高さを指定しておきます。
次にdiv.wrapperに対してのスタイルなのですが、例えばこのサンプルでいうheader要素やmain要素のように、ウィンドウ下部に表示させたいフッターコンテンツ以外の要素をこのdiv.wrapperで括ります。（既にそれに該当するようなものが記述されているのであればそれを使用する形でも問題ないです。）
あとはそのdiv.wrapperに対してmin-heightを指定し、その際にcalcを使用して「100% – フッターコンテンツの高さ」という形で記述すれば、フッターをウィンドウ下部に表示させることができるようになります。
実際の表示は以下デモで確認でき、コンテンツ内容が長くても短くてもフッターコンテンツはウィンドウ下部に表示されているのを確認できると思います。
※デモでは初期表示でコンテンツ量が短い場合の見栄え、中央のボタンをクリックすることでコンテンツ量が長くなった場合の見栄えをそれぞれ確認できるようになっています。
3. Flexboxを使う
上で紹介した方法はいずれもfooterに対して高さを指定する必要がありましたが、以下で紹介する方法ではFlexboxを利用することで高さの指定をする必要がない実装方法となります。
ここではサンプルとして以下のようなHTMLを使用します。
HTML
<html>
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
<!-- ここをウィンドウ下部に表示させたい -->
</footer>
</body>
</html>上記のようなHTMLがあるとき、CSSを以下のように記述することでfooter要素をコンテンツ量に関係なくウィンドウ下部に表示させることができます。
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}見たままですが、まずbody要素に対してdisplay: flex;をflex-direction: column;と併せて記述し、高さの最小というこでmin-heightも一緒に記述するのですが、この時min-heightの高さの値はvhというビューポートの単位を利用して指定しておきます。
あとはmain要素に対してflex: 1;を記述すれば、フッターをウィンドウ下部に表示させることができるようになり、これまでのものとは違って今後フッターコンテンツの内容が変わって高さが変わったとしてもCSSの修正等も必要なくそのままこの動き（見栄え）を使え羽陽になります。
実際の表示は以下デモで確認でき、コンテンツ内容が長くても短くてもフッターコンテンツはウィンドウ下部に表示されているのを確認できると思います。
※デモでは初期表示でコンテンツ量が短い場合の見栄え、中央のボタンをクリックすることでコンテンツ量が長くなった場合の見栄えをそれぞれ確認できるようになっています。
以上、CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法を3パターン紹介してきました。
冒頭にもあるように以前であればJavaScriptを利用したり、CSSでやるにしてもIEに対応させるためだけの無駄な記述が多かったりしましたが、最近では対応ブラウザの変化によって上で紹介してきたようにシンプルなCSSで実装ができたり、ネックだった高さ指定も必要なくなったりもしてきました。
3パターンの実装方法を紹介してきましたが、もっとシンプルな実装方法や汎用性高い実装方法をご存知の方がいれば是非教えてください :)