Mise en page avec pied de page et barre latérale fixes

Un pied de page fixe reste en bas de la fenêtre d’affichage lorsque le contenu est court, mais descend avec le contenu lorsque celui-ci est long. La difficulté historique consistait à fixer le pied de page sans connaître la hauteur du contenu ni utiliser JavaScript.

La solution moderne la plus simple consiste à utiliser body { display: flex; flex-direction: column; min-height: 100vh; } et main { flex: 1; }. Le contenu principal s’agrandit pour remplir l’espace disponible et repousse le pied de page vers le bas, quelle que soit la longueur du contenu.

Alternative avec la grille CSS : body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. L’en-tête reçoit une hauteur automatique, le contenu principal reçoit 1fr (il remplit l’espace restant) et le pied de page reçoit une hauteur automatique. C’est propre et explicite : le modèle de lignes montre clairement l’intention de mise en page.

position: sticky; bottom: 0 fixe le pied de page en bas de la fenêtre d’affichage pendant le défilement, mais uniquement lorsque son contexte de défilement l’autorise. Cette approche fonctionne pour les pieds de page situés dans un conteneur défilant, mais convient moins aux pieds de page fixes au niveau de la page, pour lesquels les boîtes flexibles ou la grille sont plus propres.

Pour une mise en page composée d’une barre latérale et d’un contenu principal : wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. Le min-width: 0 du contenu principal empêche les éléments flexibles de déborder de leur conteneur lorsqu’ils contiennent du contenu large.

Barre latérale avec une grille : wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. La colonne de la barre latérale est fixe et la colonne du contenu remplit l’espace restant. Ajoutez une ligne d’en-tête avec grid-template-rows: auto 1fr, la barre latérale s’étendant sur les deux lignes.

Sur mobile, repliez la barre latérale au-dessus ou au-dessous du contenu principal : utilisez une requête média pour passer d’une mise en page en colonnes à une pile sur une seule colonne. Vous pouvez aussi utiliser grid-template-columns: min(280px, 30%) 1fr pour une barre latérale fluide qui rétrécit sur les fenêtres d’affichage plus petites.

Rendez le défilement de la barre latérale indépendant avec sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. La barre latérale reste visible pendant le défilement du contenu principal, ce qui convient parfaitement aux barres latérales de navigation ou de table des matières sur les pages de contenu long.

Une barre latérale rétractable bascule entre un état pleine largeur et un état avec les icônes uniquement. Utilisez une propriété personnalisée CSS pour la largeur de la barre latérale : --sidebar-width: 280px sur l’enveloppe, puis basculez vers 64px au moyen d’une classe. Les transitions animent harmonieusement le changement de largeur.

Une barre latérale en position fixe (position: fixed; left: 0; top: 0; height: 100vh) nécessite de décaler le contenu principal de la largeur de la barre latérale : main { margin-left: 280px }. Sur mobile, la barre latérale glisse par-dessus le contenu, avec un bouton de fermeture et une couche d’arrière-plan.

Marquez les barres latérales de navigation avec <nav> et aria-label="Sidebar navigation". Les barres latérales rétractables ont besoin d’un bouton de bascule accessible avec aria-expanded et aria-controls. Les liens d’évitement permettent aux utilisateurs du clavier de contourner les barres latérales pour atteindre le contenu principal.

Une boîte flexible avec flex: 1 sur le contenu principal, ou une grille à trois lignes, permet de créer des pieds de page fixes avec un minimum de CSS. Les mises en page avec barre latérale utilisent des définitions de colonnes fixes ou fluides et des points d’arrêt adaptatifs pour se replier sur mobile. Les barres latérales fixes, les largeurs rétractables et les attributs ARIA accessibles complètent des modèles de barres latérales et de pieds de page prêts pour la production.