ヘッダー・コンテンツ・フッターで構成されているサイトで、コンテンツの内容が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせフォームの送信完了ページやログインページなど。
そんなコンテンツが少ない時でもフッターを画面下部に固定させる方法を紹介します。
HTMLは以下のようなシンプルなものです。
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</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;
}常にフッターを下に固定する方法
これまでのdisplay:flex,display:grid,position:stickyを使ってfooterを下に固定する方法は、高さが可変の場合、footer上部のコンテンツがブラウザの高さ以上にあった場合は、footerは隠れた状態になります。
コンテンツの量に関係なく常にfooterがブラウザ下部に固定させる場合は、position:fixedで固定させます。
See the Pen CSS footerを常に下部に固定する by mixtaro (@mixtaro) on CodePen.
.footer{
position:fixed;
bottom:0;
width:100%;
height:5vh;
z-index:100;
}
body{
padding-bottom:5vh;
}ウィンドウ下部に固定させる場合は、position:fixedとbottom:0;を指定すればOKです。
しかし、フッターを固定するとフッター部分にその他のコンテンツが隠れて見えなくなってしまう可能性があるので、フッターの高さとその高さ分の余白を指定します。
上の例では、bodyにフッターの高さ分の余白を指定しています。
position:fixedを使って要素を固定させる方法はページの下部に限らず、結構使う場面が多いですね。
- ページトップに戻るボタン
- 広告やバナーをサイドに固定表示する
- スマホ、モバイルでナビゲーションとして固定する
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>状況によって使い分けたいと思います！
