necotech blog

コンテンツの高さが足りないページでも、フッタをブラウザの一番下に固定する

Webサイトで、特定のページだけコンテンツ部分の高さが足りなくて、フッタの下に余白ができてしまうことがよくある。昔はwindow.onresizeにスクリプト書いて高さを調節して…ってやってたけど、calcを使えばCSS1行追加するだけで対処できる。

.site-header {height: 100px;}
.site-footer {height: 50px;}

/* コンテンツエリア */
main {
  min-height: calc(100vh - 150px);
}

ビューポートの高さからヘッダとフッタの高さを引いた値を、コンテンツエリアの高さの最小値に指定してやればいいだけ。calc万能すぎる…。

[デモ] コンテンツの高さが足りないページでも、フッタを一番下に固定する

Share on Facebook
Share on LinkedIn
Pocket