アナログCPU：5108843109

ゲームと音楽とプログラミング（酒と女とロックンロールのノリで）

('ω') ＜ ｲｻﾞﾕｹｴﾝｼﾞﾆｬｰ

CSSだけで画面の下端にフッターを固定する

CSS HTML

スクロールでついてくるやつではなく、
「ページの一番下に表示、ただしコンテンツが少なくスクロールが発生しないときは画面の一番下に表示」
というやつ。

まずHTMLがこんな感じで、固定したいfooter要素がbodyの直下にあるものとする。
他のコンテンツの構造は問わず。

<body>
  <!-- コンテンツいろいろ。構造は固定しなくてOK -->
  <footer>これを半固定にしたい</footer>
</body>


で、CSSがこう。
単純に、
bodyの中で位置指定を可能にして（position: relative）最低でも画面いっぱいの高さ（min-height: 100vh）を保証しておいてもらい、
footerはbodyの一番下（bottom: 0）に固定（position: absolute）してるだけ。

body {
    position: relative;
    min-height: 100vh;
}
footer {
    position: absolute;
    bottom: 0;
}