ヘッダー・コンテンツ・フッターで構成されているサイトで、コンテンツの内容が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせフォームの送信完了ページやログインページなど。
そんなコンテンツが少ない時でもフッターを画面下部に固定させる方法を紹介します。
HTMLは以下のようなシンプルなものです。
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>コンテンツが少ないとバランスが悪く、不格好な感じに。
今回の方法は、footerは常に下に固定されるのではなく、メインコンテンツの量が画面以上のボリュームがあった場合はfooterは固定されずにスクロールしたら表示されるようになるイメージです。
display:flexで実装する方法
See the Pen コンテンツが少なくてもfooterを下部に固定する（1） by mixtaro (@mixtaro) on CodePen.
bodyにdisplay:flexを適用し、flexの子要素を縦方向に並べるためflex-direction:columnを指定します。
mainをスペースいっぱいに広げるために、flex:1を指定します。
body{
display:flex;
flex-direction:column;
min-height: 100vh;
}
main{
flex: 1;
}flexboxを使うと余計なタグや要素を追加する必要がなく、シンプルに実装できるのがいいですね。
display:gridで実装する方法
See the Pen コンテンツが少なくてもfooterを下部に固定する（2） by mixtaro (@mixtaro) on CodePen.
display:gridを使ってフッターを固定する方法です。
grid-template-rowsプロパティはグリッドコンテナ内の行の高さを定義するプロパティです。
単位はpx,%,frなどで指定できるほか、minmax()関数も使うことができます。
1frはグリッドコンテナー内の残りのスペースをいっぱいに広げるために使用します。
body {
display: grid;
min-height: 100vh;
grid-template-rows: auto 1fr auto;
}position:stickyで実装する方法
See the Pen コンテンツが少なくてもfooterを下部に固定する（3） by mixtaro (@mixtaro) on CodePen.
footerにposition:stickyを設定し、top:100vhで位置を固定します。
position:stickyの場合、absoluteやfixedと違い100vhを指定しても外に飛び出ることはありません。
footer{
position:sticky;
top:100vh;
}JavaScript でフッターを下部に固定する
CSSじゃなくてJavaScriptで実装する方法もありました。
footerをウィンドウ下部に固定する『footerFixed.js』
http://blog.webcreativepark.net/2007/11/16-012253.html
javascriptを読み込んで、固定したい要素に#footerをつけるだけでこちらもとっても便利です。
<script type="text/javascript" src="./footerFixed.js"></script>状況によって使い分けたいと思います！
