固定フッター

固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

ボックスの底に押し込まれた張り付くフッター

要件

固定フッターのパターンは、次の要件を満たす必要があります。

  • コンテンツが短い場合、フッターはビューポートの下部に固定されます。
  • ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。

レシピ

: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、<body>min-height100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。

行った選択

上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。

代替方法

グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。

フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-directioncolumn に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の2つの要素を flex-shrink: 0 に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。

ブラウザー実装状況

grid-template-rows

BCD tables only load in the browser

flex-direction

BCD tables only load in the browser

flex-grow

BCD tables only load in the browser

flex-shrink

BCD tables only load in the browser

MDN にある資料