固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。
要件
固定フッターのパターンは、次の要件を満たす必要があります。
- コンテンツが短い場合、フッターはビューポートの下部に固定されます。
- ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。
レシピ
注: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、<body> で min-height を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。
行った選択
上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。
グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。
代替方法
グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。
フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-direction を column に設定します。次に、メインコンテンツを 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