on:2021年11月30日sponsorsページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。Coyier下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。sticky;を思い浮かべる人が多いと思います。それはここで話すこととはすこし異なります。sticky;が存在する以前からあったUIのコンセプトで、その意味するところは少し異なります。そのコンセプトは、ページのコンテンツが十分な量でなくてもフッタは一番下に配置されるです。十分なコンテンツがある場合、フッタはコンテンツの下に押し出されます。Gridなど、モダンなテクニックも含まれています。Rosaからの投稿を紹介します。コンテンツが十分な量でなくてもフッタを一番下に配置する方法デモをご覧ください。デスクトップのスクリーンで確認するのが一番簡単だと思います。デモにはヘッダ・コンテンツ・フッタとあり、コンテンツが十分な量でなくてもフッタは一番下に表示されています。CodePen」をクリックして別タブでご覧ください。CodePen.たったこれだけでのCSSで実現できます。100vh;}このCSSで私が気に入っている点は、追加のラッパーを必要としないことです。ちなみに、HTMLもシンプルです。CONTENT</a></footer>少し頭を悩ませられた点もあります。100vh;と書かれていると、フッタが表示領域の外に押し出されてしまうので、うまくいかないのではないかと思いました。これがこのテクニックの巧妙なところです。sticky;で下端に沿って吸い付きます。コンテンツと重なることはないので、コンテンツの下に押し出されても構わないというのが、スティッキーフッタの基本的なコンセプトです。