Pile de crêpes

Contrairement à la crêpe décomposée, cet exemple n'encapsule pas ses enfants lorsque la taille de l'écran change. Communément appelée pied de page persistant, cette mise en page est utilisée à la fois pour les sites Web et les applications, pour les applications mobiles (le pied de page est généralement une barre d'outils) et pour les sites Web (en particulier les applications monopages).

Si vous ajoutez display: grid au composant, vous obtiendrez une grille à une seule colonne. Toutefois, la taille de la zone principale sera limitée à celle du contenu sous lequel se trouve le pied de page.

Pour que le pied de page reste bien en contact avec le bas de l'écran, ajoutez:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Ainsi, le contenu de l'en-tête et du pied de page s'adapte automatiquement à la taille de leurs éléments enfants et applique l'espace restant (1fr) à la zone principale, tandis que la ligne de taille auto s'adapte à la taille du contenu minimal de ses enfants. À mesure que la taille de ce contenu augmente, la ligne s'agrandit.

<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;
}