富山のシステム開発・Web制作会社

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

コンテンツ量が少ないページをコーディングした際に、フッターの下に余白ができてしまったことから、コンテンツ量に応じてフッターの位置を変えるCSSを調べて実装してみました。備忘録として残していきたいと思います。

完成イメージ

コンテンツ量が少ない場合、フッターはブラウザの下部に固定させ、
コンテンツ量が多い場合、フッターはコンテンツの下に表示させる形を完成イメージとします。

方法としては2通りあります。

Flexboxを使う方法

display: flexで指定する方法です。
こちらの方法は、.wrap内に要素を追加しても.footerが下部に固定されるためよく使用する方法です。

HTML

<div class="wrap">
  <header class="header"> </header>
  <div class="contents"> </div>
  <footer class="footer"> </footer>
</div>

CSS

.wrap{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer{
    margin-top: auto;
}

Grid Layoutを使う方法

display: gridで指定する方法です。

HTML

<div class="wrap">
  <header class="header"> </header>
  <div class="contents"> </div>
  <footer class="footer"> </footer>
</div>

CSS

.wrap{
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

まとめ

コンテンツ量が少ない時だけフッターを下部に固定する方法をご紹介しました。
私自身display:flexの方が使用頻度が高かったのですが、display:gridで指定する方法は1箇所書き加えるだけで実装できるため、今後使用していきたいと思いました。

この記事を書いた人
Front-end Engineer

よく読まれている記事

Laravel Sailで開発環境を構築する

【jQuery】アクセスごとに動画とポスター画像をランダム表示させる方法

iPhoneのSafariでデバッグする方法

TensorFlow Lite Model Makerでカスタムモデルを作成する

LaravelとBackpackで構築した管理画面をカスタマイズする

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

LaravelとBackpackで管理画面を爆速で構築する

アクセス数バク上がり!MARBLEのアクセス数増加方法を大公開!

Flutter SDKのバージョンをプロジェクト別に指定する

メタバースとWEB3.0について

関連記事

iPhoneのSafariでデバッグする方法

Safariでclamp()が効かない場合の対処法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話