コンテンツが少ない時、普通フッターはコンテンツ量に影響されるので、フッターとウインドウの下部に隙間ができてしまい、中途半端な位置に設置されてるような感じになってしまいます。
これをコンテンツ量が少ない時はウィンドウの最下部にフッターを固定させて、スクロールが出るくらいのコンテンツ量が多いときはウィンドウ最下部に固定させずに、そのコンテンツ量に合わせて成り行きにさせる為にはどうしたらいいのか？というのをメモ。
今回は２パターンの方法をメモ。２パターンともFlexboxを使用した方法です。Flexboxを利用することで高さの指定をする必要がない点がメリットです。
Flexboxとフッターのマージンを設定する
まずは、Flexboxとフッターにmarginを設定する方法です。
ここはヘッダー
ここはコンテンツ
上記のようにheader要素、main要素、footer要素のみと簡潔にしています。
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer{
margin-top:auto;
}
まずは、body要素にdisplay:flex; を指定します。このままだとコンテンツ全体が横並びになってしまうので、flex-direction: column;で縦並びにします。min-height:100vh; を指定します。
最小の高さを100vhとすることでビューポートの高さに対する割合になるので画面いっぱいになります。
ここで、footer要素にmargin-top:auto; を指定することでウィンドウの最下部に表示されるようになります。
See the Pen コンテンツが少ない時、フッターを下に固定 by kiriyama (@kirikirimai) on CodePen.
Flexboxとフッターの直前の要素に対して設定する
続いてはフッターの直前の要素、、今回の例でいえば、main要素です。
こちらに対してCSSの設定をしていきますが、body要素に対するCSSは同じです。
ここはヘッダー
ここはコンテンツ
htmlは前回と同様です。
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
main{
flex:1;
}
今回は、main要素にflex:1;の設定をしました。
これだけでコンテンツが少なくてもfooter要素がウィンドウの最下部に表示されるようになります。
flexプロパティについて
flexプロパティは、 flex-grow／flex-shrink／ flex-basisのプロパティをまとめて指定でき、フレックスコンテナ内の子要素であるフレックスアイテムの幅をまとめて指定する時に使用します。詳しくは下記のサイトを参考にしてください。
http://www.htmq.com/css/flex.shtml
flex:1;についてですが、こちらはフレックスコンテナ（今回の例だとbody要素）の横幅もしくは縦（flex-direction:columnにしてる）に対してフレックスアイテム（header ／main ／footer 要素）の伸び方の比率を指定するプロパティで、フレックスコンテナの横幅・縦に対してフレックスアイテムの合計の横幅・縦が短い場合はそのスペースを自動的に埋めます。
ただ全てのフレックスアイテムに対してflex:1;を設定すると各フレックスアイテムが均等に伸びてしまう為、今回はmain要素のフレックスアイテムにだけ設定することで、ウィンドウの高さとフッターとのスペースを埋めようとmain要素が伸びるわけです。下記のサンプルでmain要素だけが高さが伸びるので背景色がfooter要素まで続いてることが分かるかと思います。
See the Pen コンテンツが少ない時、フッターを下に固定 ver2 by kiriyama (@kirikirimai) on CodePen.
まとめ
今回は、Flexboxを使ったフッターを最下部に設置するCSSの方法を記事にしましたが、他にもやり方はあります。以下参考サイトです。
