プログラミングの独学サイトです。

CSS

CSSフッターを下に固定する方法｜画面下・最下部・sticky footer

CSSでフッターを画面下やページ最下部に配置する方法を20パターンで解説します。sticky footer、fixed footer、flex、grid、固定CTA、本文に重ならない余白の取り方を整理します。

更新 2026.07.12公開 2026.07.08 12分で読めます
この記事の目次
  1. 1. まずおすすめのsticky footer
  2. 2. 100svh を使うsticky footer
  3. 3. Gridでフッターを下に置く
  4. 4. margin-top: auto でフッターを押し下げる
  5. 5. bodyを直接flexにする方法
  6. 6. WordPressテーマのラッパーで使う例
  7. 7. 固定フッターを画面下に表示する
  8. 8. fixed footerが本文に重なるときの余白
  9. 9. スマホの安全領域に対応するfixed footer
  10. 10. 固定CTAバーとして使う
  11. 11. アプリ風の下部ナビを固定する
  12. 12. フッター内のコンテンツ幅をそろえる
  13. 13. ヘッダー固定とフッター最下部を両立する
  14. 14. 内容が少ないランディングページで下に置く
  15. 15. フッターだけ下に行かない原因を確認する
  16. 16. height: 100% だけで解決しない理由
  17. 17. フッターが重なるときのz-index
  18. 18. 印刷時はfixed footerを解除する
  19. 19. sticky footerとfixed footerの違い
  20. 20. フッター下固定の最小テンプレート
  21. フッターが下に行かない原因
  22. まとめ

ページの内容が少ないと、フッターが画面の途中に浮いて見えることがあります。

この記事では、CSSでフッターを下に配置する方法を20パターンに分けて解説します。通常のサイトで使うsticky footer、常に画面下に固定するfixed footer、本文に重ならない余白の取り方まで、コピーして使いやすい形にまとめます。

1. まずおすすめのsticky footer

通常のサイトでは、コンテンツが少ないときは画面下に、多いときはページ最下部に置く方法がおすすめです。

<body>
  <div class="page">
    <header>ヘッダー</header>
    <main class="page-main">本文</main>
    <footer>フッター</footer>
  </div>
</body>
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main {
  flex: 1;
}

main を伸ばして、フッターを下に押し下げる考え方です。

2. 100svh を使うsticky footer

スマホの表示領域に合わせたい場合は、100svh を使う方法もあります。

.page-svh {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-svh main {
  flex: 1;
}

スマホでアドレスバーの影響を受けにくくしたい場合に使いやすい指定です。

3. Gridでフッターを下に置く

Gridでも、ヘッダー・本文・フッターの3段レイアウトを作れます。

<div class="page-grid">
  <header>ヘッダー</header>
  <main>本文</main>
  <footer>フッター</footer>
</div>
.page-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

1fr の本文行が伸びるため、フッターが下に配置されます。

4. margin-top: auto でフッターを押し下げる

flexの子要素であるfooterに margin-top: auto; を指定する方法です。

<div class="page-auto-footer">
  <header>ヘッダー</header>
  <main>本文</main>
  <footer>フッター</footer>
</div>
.page-auto-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-auto-footer footer {
  margin-top: auto;
}

本文側に flex: 1; を指定しない書き方として覚えておくと便利です。

5. bodyを直接flexにする方法

ラッパー要素を作らず、body をflexにする方法です。

<body>
  <header>ヘッダー</header>
  <main>本文</main>
  <footer>フッター</footer>
</body>
html,
body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}

CMSやテーマによってはbody直下の構造が違うため、実際のHTMLに合わせて調整します。

6. WordPressテーマのラッパーで使う例

WordPressでは、#page や .site のようなラッパーに指定することがあります。

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

テーマによってクラス名は違うため、実際のラッパー名に置き換えます。

7. 固定フッターを画面下に表示する

常に画面下に表示したい場合は、position: fixed; を使います。

<footer class="footer-fixed">固定フッター</footer>
.footer-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 16px;
  color: #fff;
  text-align: center;
  background: #111827;
}

これはページ最下部ではなく、常に画面の下に固定する方法です。

8. fixed footerが本文に重なるときの余白

固定フッターは本文に重なりやすいので、下余白を追加します。

body {
  padding-bottom: 80px;
}

.footer-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 64px;
}

フッターの高さより少し大きめに padding-bottom を取ります。

9. スマホの安全領域に対応するfixed footer

スマホのホームインジケーターに重ならないように、safe-area-inset-bottom を使います。

.footer-safe {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  color: #fff;
  background: #111827;
}

スマホで固定CTAを置くときに便利です。

10. 固定CTAバーとして使う

問い合わせボタンや購入ボタンを画面下に固定する例です。

<div class="footer-cta">
  <a href="#">お問い合わせする</a>
</div>
.footer-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #e5e7eb;
}

.footer-cta a {
  display: block;
  max-width: 420px;
  margin: 0 auto;
  padding: 13px 18px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: #2563eb;
  border-radius: 8px;
}

ボタンの見た目は CSSボタンデザイン集 とつなげられます。

11. アプリ風の下部ナビを固定する

スマホアプリのような下部ナビを固定する例です。

<nav class="bottom-nav">
  <a href="#">ホーム</a>
  <a href="#">検索</a>
  <a href="#">設定</a>
</nav>
.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.bottom-nav a {
  padding: 12px 8px;
  color: #334155;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}

通常のサイトフッターとは役割が違うため、必要なページだけに使います。

12. フッター内のコンテンツ幅をそろえる

フッター自体は横幅いっぱい、内側だけ最大幅にする例です。

<footer class="footer-contained">
  <div>フッター内容</div>
</footer>
.footer-contained {
  padding: 32px 20px;
  color: #fff;
  background: #111827;
}

.footer-contained > div {
  max-width: 1120px;
  margin: 0 auto;
}

ヘッダーや本文の最大幅とそろえると、ページ全体が整います。

13. ヘッダー固定とフッター最下部を両立する

ヘッダーは固定、フッターはページ最下部に置く場合の考え方です。

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.page-with-fixed-header {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 64px;
}

.page-with-fixed-header main {
  flex: 1;
}

fixedヘッダーとsticky footerは別の問題なので、余白を分けて考えます。

14. 内容が少ないランディングページで下に置く

本文が短いLPでも、フッターが途中に浮かないようにします。

<div class="lp-page">
  <main>
    <section>メインコピー</section>
  </main>
  <footer>フッター</footer>
</div>
.lp-page {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.lp-page main {
  display: grid;
  place-items: center;
  padding: 48px 20px;
}

中央寄せは CSS中央寄せまとめ と相性がよいです。

15. フッターだけ下に行かない原因を確認する

sticky footerが効かないときは、まずこのセットがそろっているか確認します。

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page main {
  flex: 1;
}

display: flex;、flex-direction: column;、min-height、flex: 1; のどれかが抜けると崩れやすいです。

16. height: 100% だけで解決しない理由

height: 100% は、親の高さが決まっていないと期待通り効かないことがあります。

html,
body {
  min-height: 100%;
}

.page {
  min-height: 100vh;
}

ページ全体の高さを確保したい場合は、min-height: 100vh; の方がわかりやすいです。

17. フッターが重なるときのz-index

固定フッターが他の要素に隠れる場合は、重なり順を確認します。

.footer-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

むやみに大きい数値にする前に、親要素の position や z-index も見ます。

18. 印刷時はfixed footerを解除する

印刷時に固定フッターが各ページに重なる場合は、印刷用CSSで解除します。

@media print {
  .footer-fixed,
  .footer-cta,
  .bottom-nav {
    position: static;
  }

  body {
    padding-bottom: 0;
  }
}

資料ページや規約ページでは、印刷時の見え方も確認しておくと安心です。

19. sticky footerとfixed footerの違い

似ていますが、目的が違います。

方法 特徴 向いている場面
sticky footer 内容が少ないときだけ下に見える 通常のサイトフッター
fixed footer 常に画面下に固定される 固定CTA、下部ナビ

通常のWebサイトなら、まずsticky footerを検討します。

20. フッター下固定の最小テンプレート

最後に、もっとも使いやすい最小セットです。

<div class="layout">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout main {
  flex: 1;
}

.layout footer {
  padding: 24px;
  color: #fff;
  background: #111827;
}

迷ったらこのテンプレートから始めると、短いページでもフッターが下に配置されます。

フッターが下に行かない原因

  • 親要素に min-height: 100vh; がない
  • 親要素が display: flex; または display: grid; になっていない
  • 本文エリアが伸びる指定になっていない
  • fixed とsticky footerを混同している
  • 固定フッターの高さ分の余白がなく、本文に重なっている

まとめ

フッターをページの下に置きたいなら、通常はsticky footerを使います。flexなら min-height: 100vh; と本文の flex: 1;、Gridなら grid-template-rows: auto 1fr auto; が基本です。

常に画面下に表示したい場合だけ position: fixed; を使い、本文に重ならない余白もセットで用意します。

RELATED

あわせて読みたい記事