今回はフッターをflexboxで下部に固定する方法を紹介します。
コード量も少なくシンプルに記述できます。
サンプルコード
htmlはこのような感じです。
<body>
<main>
flexboxでフッターを固定する
</main>
<footer>
<p>フッターは下に固定される</p>
</footer>
</body>
cssではflexboxを使用するので、display: flex;と記述します。
flex-direction: column;と指定することでフレックスアイテムが主軸に沿って上から下に配置されます。
次にmin-height: 100vh;で高さの最小値を100vhに設定します。
※「vh」とは「viewport height」の略でviewportの高さに対する割合を指定することが可能です。「height: 1vh」は「height=1%」になります。
フッター要素に対してmargin-top: auto;と記述するとフッターが下に固定されます。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
See the Pen YjPMoG by Nssh (@shtg11) on CodePen.0
また、以下のように
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
main要素にflex: 1;と指定することでもfooterは下に固定されます。
See the Pen RBNOmK by Nssh (@shtg11) on CodePen.0
CSS3のflexboxを使ってフッターを固定するしようとしている方は、参考にしてください。