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