ikmnjrd.github.io

フッター固定のCSSトリックから学ぶsticky

Posted on 2024-06-16

stickyを使ったフッターの実装

よく見る残念な実装に、コンテンツ量が少なくフッターが画面下に貼り付かないことがありますが、以下の例はコンテンツ量が少なくても大丈夫でこのコード量なので現時点でもっとも優れた実装だと思います。

<html>
  <body>
    <main>
      ここには色々。100vhを超えるものも入ったり。
    </main>
    <footer>
      これはフッターです
    </footer>
  </body>
</html>

body { min-height: 100%;}

body > footer {
  position: sticky;
  top: 100vh; // もしくはbottom: 0
}

stickyの解説

そもそも、position: sticky とはMDNによれば

sticky 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック（直近のブロックレベル祖先、表関連要素を含む）に対して top, right, bottom, left の値に基づいて相対配置されます。このオフセットは他の要素の配置には影響を与えません。 この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（overflow が hidden, scroll, auto, overlay として作成されたもの）に「粘着」します。 引用元: position - CSS: カスケーディングスタイルシート | MDN

難しい言葉がでてきますが、私なりに簡単に要約するなら「スクロールの機能を持つ直近の包含ブロックにくっつく」ことだと言ってみます。

包含ブロックというのは「widthやheightを%指定したとき、その元となる要素（ブロック）」という理解でまずは大丈夫です。詳しくはMDNのこちらのページで。

stickyの理解のためのデモ

try-change-heightクラスのheight指定部分を色々と触ってみてください。

参考文献