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

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。

フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。

A Clever Sticky Footer Technique
by Chris Coyier

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• コンテンツが十分な量でなくてもフッタを一番下に配置する方法

はじめに

「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。

しかし、それはここで話すこととはすこし異なります。
「スティッキーフッタ」はposition: sticky;が存在する以前からあったUIのコンセプトで、その意味するところは少し異なります。そのコンセプトは、ページのコンテンツが十分な量でなくてもフッタは一番下に配置されるです。もちろん、十分なコンテンツがある場合、フッタはコンテンツの下に押し出されます。

私は以前に5つの方法を紹介しましたが、その中にはcalc()やflexbox、CSS Gridなど、モダンなテクニックも含まれています。

Sticky Footer, Five Ways

6人目のチャレンジャーが現れました！
Sílvio Rosaからの投稿を紹介します。

コンテンツが十分な量でなくてもフッタを一番下に配置する方法

デモをご覧ください。
デスクトップのスクリーンで確認するのが一番簡単だと思います。
デモにはヘッダ・コンテンツ・フッタとあり、コンテンツが十分な量でなくてもフッタは一番下に表示されています。

このページでデモを表示しても分かりにくいかもしれませんので、右上「Edit on CodePen」をクリックして別タブでご覧ください。

See the Pen
sticky footer sticky by Silvio (@silvio-r)
on CodePen.

たったこれだけでのCSSで実現できます。

このCSSで私が気に入っている点は、追加のラッパーを必要としないことです。
ちなみに、HTMLもシンプルです。

少し頭を悩ませられた点もあります。私はtop: 100vh;と書かれていると、フッタが表示領域の外に押し出されてしまうので、うまくいかないのではないかと思いました。しかし、これがこのテクニックの巧妙なところです。

フッタのサイズは関係なく、position: sticky;で下端に沿って吸い付きます。もちろん、コンテンツと重なることはないので、コンテンツの下に押し出されても構わないというのが、スティッキーフッタの基本的なコンセプトです。