ウェブサイトを作成する際に、トップページのコンテンツの情報量が少ない場合でもフッターを一番下に固定したい時がありますよね。
その場合に、いろいろな方法があるのですがとても良いと思った方法を1つご紹介します。

私の紹介する方法は下記サイトにも掲載されており、5つの方法すべてが掲載されているので
興味のある方は覗いてみてください。

【URL】https://css-tricks.com/couple-takes-sticky-footer/

では実際のソースから。
CSSはたったこれだけ。

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

なんだか思いつきそうなもんですが、意外とこれやったことなかったです。
これの何がうまいかといいますと、footerのサイズは関係なく「position: sticky」で下端に沿って吸い付くところ。

これが結構肝です。

sliveさんという方がコードペンでソースを実装してくれているので
貼っておきます。みなさんもぜひ参考にしてみてください。

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

• blog,
• code,
• css3,
• web