CSSで内容が少なくてもフッターを画面の下に置くには
縦並びの flexbox で本文の高さを flex: 1 に任せ、本文が短いページでもフッターを画面の下端に置く。
本文が長いときはフッターが内容の後ろに続くだけなので、固定表示と違って読む邪魔にならない。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="page">
<header class="page__header">サイト名</header>
<main class="page__main">
<p>本文が短くても、フッターは枠の下端に付く。</p>
</main>
<footer class="page__footer">© 2026 Example</footer>
</div>/* プレビュー枠を隙間なく使うため、body の既定の余白を消す */
body {
margin: 0;
}
/* ページ全体を縦並びの flex にして、最低でも画面の高さまで広げる */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh; /* 対応していないブラウザは上の 100vh のまま */
}
.page__header {
padding: 10px 16px;
background: #0f766e;
color: #fff;
font-weight: 700;
}
/* 余った高さを本文が全部受け持つので、フッターは下端へ押し下げられる */
.page__main {
flex: 1;
padding: 16px;
background: #f8fafc;
}
.page__main p {
margin: 0;
}
.page__footer {
padding: 10px 16px;
background: #e2e8f0;
color: #334155;
font-size: 14px;
}ページ全体を display: flex と flex-direction: column にして min-height: 100vh を与え、本文の main に flex: 1 を付けると、余った高さを main が受け持ち、フッターが下端へ押し下げられる。
高さを height ではなく min-height で指定するのは、本文が画面より長くなったときに中身がはみ出さず、ページごと伸びるようにするためである。
つまずき
height: 100% を指定してもフッターが下がらないときは、html と body の高さが決まっていないことが原因である。
親の高さが中身で決まっている場合、パーセントで指定した height は auto と同じ扱いになり、何も伸びない。
上の例のように、ビューポートの高さを表す 100vh を min-height に使うと、親の高さに左右されずに済む。
height: 100vh にすると、本文が画面より長くなったときに中身が枠の外へはみ出すので、下限だけを決める min-height を使う。
本文が短いのに縦スクロールバーが出るとき
本文が短いのに縦のスクロールバーが出るときは、body の既定の余白を疑う。
ブラウザは body に 8px ほどの margin を付けており、.page の min-height: 100vh にその上下の分が足されて、画面より 16px ほど高いページになる。
上の例では body { margin: 0 } で余白を消している。
余白が欲しいときは、body ではなく、ヘッダー・本文・フッターそれぞれの padding で付けるとよい。
スマートフォンでフッターが見切れるとき
スマートフォンのブラウザでは、100vh がアドレスバーの引っ込んだときの高さで計算される。
バーが出ている間は画面の下端より外側までページが伸びるので、フッターが見切れ、少しスクロールしないと見えない。
上の例の min-height: 100dvh は、いま見えている高さに追従する単位で、Chrome 108・Firefox 101・Safari 15.4 以降が対応している。
対応していないブラウザは dvh の行を無視するので、その前に 100vh を書いておけば、同じ規則の中で代わりに使われる。
dvh はバーの出入りに合わせて高さが変わるため、スクロール中にレイアウトが動いて見えることがある点には注意したい。
フッターを画面に固定するのとは違う
この方法は、本文が短いときにフッターを下端へ寄せるだけで、フッターを画面に固定するものではない。
本文が画面より長ければ、フッターは本文の後ろに続き、最後までスクロールしたところで現れる。
画面の下端に常に表示し続けたいときは、position: sticky と bottom: 0 を使う。
ただしフッターが本文の一部を隠すので、固定表示が本当に要るかを先に考えるとよい。
別の書き方
フッターに margin-top: auto を付けても同じ結果になる。
flex の縦並びでは auto の余白が余った高さを吸収するので、本文に flex: 1 を付けなくてもフッターが下端へ寄る。
グリッドなら、.page に display: grid と grid-template-rows: auto 1fr auto を指定し、ヘッダー・本文・フッターの 3 段のうち真ん中だけを伸ばす。
この場合も min-height: 100vh は必要である。
どれを選んでも結果は同じなので、すでに flex か grid で組んでいるページなら、そのレイアウトに合う方で足りる。