コンテンツが少ない量でもフッタを一番下に配置する

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニック。コンテンツが多ければ、成り行きで配置される。
フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ない。シンプルなHTMLに、数行のCSSで簡単に実装できる。

inserted by FC2 system