よくあるフッターを最下部に固定する処理

フッターを固定するために、htmlとbodyタグの高さを100%にして、その中に最低100%の高さになる箱を作って、そこの最下部にフッターが来るよう調整したうえで、コンテンツの下に余白を持たせるなどという処理が書かれます。

あるとき、body直下のその箱いらなくね？bodyに箱の役割持たせればよくね？っと思って実装したらうまくいったものの、毎度そのコードを見つけに行くのが面倒になったので、ここにメモとして置いておきます。

やっていること

フッターを最下部に固定するための肝となる箱は、主に以下のスタイルかと思います。

min-height: 100%;
height: auto !important;
height: 100%;
position: relative;

これをそのままbodyタグに持っていくだけです。

後はコンテンツとフッターをbodyタグ直下に書けばそのまま使えます。

普通に固定したい場合は階層が一段階減ってうれしいです。

コード

フッターの高さは20pxでfooterタグとし、コンテンツはその高さ分下にpaddingが設定してあるarticleタグを使った実装例が以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{height:100%;}
body{margin:0;padding:0;min-height:100%;height:auto !important;height:100%;position:relative;}
article{padding-bottom:20px;}
footer{position:absolute;width:100%;height:20px;bottom:0;text-align:center;overflow:hidden;}
</style>
</head>
<body>
    <article>contents</article>
    <footer>Copyright &copy; 20XX YOURNAME All Rights Reserved.</footer>
</body>
</html>