Le pied de page qui remonte — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 7)

Le pied de page qui remonte

Flexbox · niveau 2

Énoncé

Sur la page « Contact » de la Librairie, très courte, le pied de page apparaît au milieu de l'écran. Écrire les règles qui le collent en bas de la fenêtre quand la page est courte, sans le rendre fixe. Pourquoi min-height et pas height ?

Corrigé


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, sans-serif;
}

.milieu {
  flex: 1;
  padding: 0 16px;
}

.haut,
.bas {
  padding: 16px;
  color: #fff;
  background: #1f3a68;
}

Le <body> devient une colonne d'au moins la hauteur de la fenêtre, et le <main> prend tout l'espace libre : le pied est poussé en bas (ordonnée 550 pour 50 pixels de haut dans une fenêtre de 600). Avec height: 100vh, une page longue serait coupée à la hauteur de la fenêtre et son contenu déborderait par-dessus le pied ; min-height laisse la page grandir.