😽

CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する

2022/08/03に公開約1,500字6件のコメント

メインコンテンツの高さが足りなくてもフッターが中途半端な位置に来ないようにしたい

Webアプリケーションのレイアウトで、①ヘッダー②メインコンテンツ③フッターの3つで構成するというパターンはよくあると思うんですが、
👇 こんな感じでフッターの下に中途半端な隙間を作りたくないですよね。

フッターの下に中途半端な隙間ができてしまうこれは困る

👇 メインコンテンツの高さが短くても、フッターがぴったりビューポートの下にくっつくようにしたいですよね。

フッターがぴったり画面下にくっつく良いね

👇 ただ、フッターが常に下に固定されているのではなくて、メインコンテンツがビューポートより高くなったときには、フッターは下にずれていってほしいんですよね。

良いね

gridを使うと簡単

自分はこれをずっとflexで実現していたのですが、(メインコンテンツの)孫要素の高さを100%にしたいときなんかに色々ややこしくて、gridを使うのがいちばん楽だなーという結論に至りました。gridはすでにブラウザ対応を気にせず使えるCSSプロパティだと思います。

HTML
<div class="container">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <footer> フッター</footer>
</div>

HTMLをこのように組むとして、CSSを以下のように指定します。

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

これでこの画像のようなレイアウトが実現できます。

フッターがぴったり画面下にくっつく

grid-template-rowsの値をauto 1fr autoとすることで、ヘッダーとフッターの高さを除いた残りの部分をメインコンテンツ部分で埋めるようなレイアウトになります。ちなみにヘッダーが存在しない場合(メインコンテンツとフッターだけの場合)は1fr autoとすればOKです。

min-height: 100vhはヘッダー・フッター・メインの3つを囲む要素の高さを、ビューポートより大きくするために必要です。

grid-template-columns: 100%が必要な理由はコメントで教えてもらいました。クラクさん、ありがとうございます。

それにしてもgridが心置きなく使える時代になったのは本当に嬉しいですね。

Discussion

ピン留めされたアイテム

こんにちは!僕もよく使っているのですが、子要素に親要素の幅を超えるpreがあると崩れまして↓

https://codepen.io/qrac/pen/abYqMzR

grid-template-columns: 100%; を追加すると崩れが直るという事案がありました↓ 役に立つかも?

https://codepen.io/qrac/pen/NWYyJvv

超有益な情報をありがとうございます!コードを修正しておきます!

ちなみにヘッダーが存在しない場合(メインコンテンツとフッターだけの場合)はauto 1frとすればOKです。

ヘッダーがない場合は1fr autoになると思います。

ありがとうございます!修正しました。

ログインするとコメントできます