この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス

[coliss]

フッタを一番下に配置するCSSのテクニック、フッタの高さは自由、追加のラッパーは必要なし。

[naratas]

こんな誰しもが求めるような基本的な実装をするのに何故「テクニック」を要すのかという根本的な部分はいつ解決するんだろうね

[Lhankor_Mhy]

スクロールメディアであるブラウザで、ページメディアもどきを作ろうと無理するからテクニックが必要になるのであって、ページめくり型のブラウザでも登場しない限り小手先になるのは仕方がないね。

[osamu0329]

CSSってバッドノウハウの固まりに見えて仕方ない。

[field_combat]

なるほど

[Helfard]

これは面白いな－。

[spark7]

html,body{height:100%}の直下でposition: sticky;した場合にのみ起こるぽいな。

[paulownia]

flex 1より楽

[hapilaki]

“html,body{height:100%;}body>footer{position:sticky;top:100vh;}”

[mohritaroh]

おもしろい

[yamasta]

　コンテンツ量が少ない場合は、フッターをウインドウ表示領域の一番下に表示。コンテンツ量がある場合は、フッターをスクロール後のコンテンツの下に表示。

[Shinwiki]

“数行のCSSで簡単に” その数行が積もってゴミ化してんだわ