積み重なったパンケーキ
分解されたパンケーキとは異なり、この例では、画面サイズが変更されても子はラップされません。一般にスティッキー フッターと呼ばれるこのレイアウトは、ウェブサイトとアプリの両方、モバイルアプリ(フッターは通常ツールバー)、ウェブサイト(特にシングルページ アプリケーション)で使用されます。
コンポーネントに display: grid
を追加すると、グリッドは 1 列になりますが、メインエリアの高さは、その下にフッターがあるコンテンツと同じ高さになります。
フッターを下部に固定するには、次のものを追加します。
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
これにより、ヘッダーとフッターのコンテンツは自動的に子のサイズを取得し、メイン領域に残りのスペース(1fr
)が適用されます。一方、auto
サイズの行は子の最小コンテンツ サイズになるため、コンテンツのサイズが大きくなると、行自体もそれに合わせて拡大します。
<div class="parent">
<header class="section yellow">Header</header>
<main class="section blue">Main</main>
<footer class="section green">Footer Content</footer>
</div>
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
/* Just for parent demo size */
height: 100vh;
}
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-10-25 UTC。
[null,null,["最終更新日 2023-10-25 UTC。"],[],[]]