張りつくフッター
張りつくフッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「張りつく」パターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。
要件
張りつくフッターのパターンは、次の要件を満たす必要があります。
- コンテンツが短い場合、フッターはビューポートの下部に張りつきます。
- ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。
レシピ
以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。
<div class="wrapper">
<header class="page-header">これがヘッダーです</header>
<main class="page-body">
<p contenteditable>
この段落は短いですが、フッターは画面の下部に固定されたままです。この編集可能な領域にコンテンツを追加すると、コンテンツに合わせて必要に応じてフッターが下に移動するのが確認できます。
</p>
</main>
<footer class="page-footer">張りつくフッター</footer>
</div>
* {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
font: 1.2em sans-serif;
}
.wrapper {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.page-header,
.page-footer {
background-color: rgb(75 70 74);
color: white;
padding: 20px;
}
.page-body {
padding: 20px;
}
.page-body p {
border: 1px solid grey;
}
メモ:
この例と以下の例では、ライブ例がうまくいくように、 wrapper に min-height: 100% に設定して使用しています。 また、<body> の min-height を 100vh に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
選択したもの
上記の例では、CSS グリッドレイアウトを使用して張りつくフッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。
グリッドの自動配置では、アイテムがソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能な空間をすべて占有するため、隙間を埋めるように大きくなります。
代替策
また、フレックスボックスを使用して、張りつくフッターを作成することもできます。
<div class="wrapper">
<header class="page-header">これがヘッダーです</header>
<main class="page-body">
<p contenteditable>
この段落は短いですが、フッターは画面の下部に固定されたままです。この編集可能な領域にコンテンツを追加すると、コンテンツに合わせて必要に応じてフッターが下に移動するのが確認できます。
</p>
</main>
<footer class="page-footer">張りつくフッター</footer>
</div>
* {
box-sizing: border-box;
}
html,
body {
box-sizing: border-box;
height: 100%;
padding: 0;
margin: 0;
font: 1.2em sans-serif;
}
.wrapper {
box-sizing: border-box;
min-height: 100%;
display: flex;
flex-direction: column;
}
.page-header,
.page-footer {
background-color: rgb(75 70 74);
color: white;
padding: 20px;
flex-grow: 0;
flex-shrink: 0;
}
.page-body {
padding: 20px;
flex-grow: 1;
}
.page-body p {
border: 1px solid grey;
}
フレックスボックスの例は同じように始まりますが、.wrapper では display:flex を display:grid の代わりに使用しています。また、flex-direction を column に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の 2 つの要素を flex-shrink: 0 に設定します。これにより、コンテンツがメイン領域いっぱいになったときに、それらが縮小されるのを防ぎます。
MDN のリソース
- CSS プロパティ:
display,min-height,grid-template-rows,flex-direction,flex-grow,flex-shrink - グリッドレイアウトの基本概念
- CSS グリッドレイアウトモジュール
- フレックスボックスの基本概念
- CSS フレックスボックスレイアウトモジュール