HOME > CSS > cssでコンテンツが少ない時でもフッターをブラウザ最下部に固定する

  • 投稿日： 最終更新日：
  • カテゴリー： CSS

cssでコンテンツが少ない時でもフッターをブラウザ最下部に固定する

css記述

このページで実装しています。他のページはJSライブラリを使用してフッターをブラウザ最下部に固定しています。

現在の書き方

vhという単位とcalcという計算式を用いた書き方を使います。vhは「Viewport Height」のことで、ビューポートの高さに対する1/100の単位で100vhでブラウザの高さになる。

#container{min-height: calc(100vh - 20px);}
#footer {height: 20px;}

参考にしたサイト

以前の書き方

#container {position: relative;height: auto !important;height: 100%;min-height: 100%;}
#content {padding-bottom: 20px;}
#footer {position: fixed;bottom: 0;height: 20px;}

参考にしたサイト