CSSで内容が少ない時はブラウザ下部に固定し多い時は下に流れるStickyフッター6種類
最近流行りのStickyフッターを表現する方法の紹介です。昔ながらのネガティブマージンを使う方法から最新のテクニックを使った方法まで6種類です。
マークアップ
<html>
<body>
メインコンテンツ
</body>
</html>
フッターの高さが一定
フッターの高さが分かっている場合に使えます。フッターの高さは 5em とします。
ネガティブマージン
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
.container
{
padding-bottom: 5em;
min-height: 100%;
}
.footer
{
margin-top: -5em;
height: 5em;
}
ネガティブマージンと擬似要素
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
.container
{
margin-bottom: -5em;
min-height: 100%;
}
.container:after
{
display: block;
height: 5em;
content: '';
}
.footer
{
height: 5em;
}
calc()
*
{
margin: 0;
padding: 0;
}
.container
{
min-height: calc(100vh - 5em);
}
.footer
{
height: 5em;
}
絶対配置
*
{
margin: 0;
padding: 0;
}
html
{
position: relative;
min-height: 100%;
}
body
{
margin-bottom: 5em;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 5em;
}
フッターの高さが可変
フッターの高さが分からなくても使えるので便利です。
flexbox
*
{
margin: 0;
padding: 0;
}
body
{
display: -webkit-box; /* Android */
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Safari */
display: flex;
min-height: 100vh;
-webkit-box-direction: column; /* Android */
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}
.container
{
-webkit-box-flex: 1; /* Android */
-ms-flex: 1; /* IE10 */
flex: 1;
}
display:table-row
*
{
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
body
{
display: table;
height: 100%;
}
.container
{
display: table-row;
height: 100%;
}
IE8から使えて、個人的にオススメな方法ですが、.container 内にさらにレイアウト分割するときには少しテクニックが必要な場合があります。詳しくは以下の記事をみてください。