Bas de page adhérant
Un motif de bas de page adhérant est un motif où le pied de page de votre page « colle » au bas de la zone d'affichage (viewport en anglais) lorsque le contenu est plus court que la hauteur de la zone d'affichage. Nous allons examiner quelques techniques pour en créer un dans cette recette.
Exigences
Le motif de bas de page adhérant doit répondre aux exigences suivantes :
- Le pied de page colle au bas de la zone d'affichage lorsque le contenu est court.
- Si le contenu de la page dépasse le bas de la zone d'affichage, le pied de page est repoussé vers le bas et reste toujours en dessous du contenu comme d'habitude.
Recette
Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :
<div class="wrapper">
<header class="page-header">Ceci est l'en-tête</header>
<main class="page-body">
<p contenteditable>
Le pied de page colle au bas même si ce paragraphe est court. Ajoutez du
contenu dans cette zone modifiable pour voir le pied de page descendre
lorsque c'est nécessaire pour s'adapter au contenu.
</p>
</main>
<footer class="page-footer">Bas de page adhérant</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;
}
Note :
Dans cet exemple et le suivant, nous utilisons un conteneur principal avec min-height: 100%. Vous pouvez aussi obtenir ce résultat pour une page entière en appliquant min-height à 100vh sur l'élement HTML <body> et en l'utilisant comme conteneur de grille.
Choix effectués
Dans l'exemple ci-dessus, nous obtenons le bas de page adhérant en utilisant la mise en page en grille CSS. Le .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi haut que le conteneur dans lequel il se trouve. Nous créons ensuite une grille à une seule colonne avec trois lignes, une pour chaque partie de notre mise en page.
Le placement automatique en grille place nos éléments dans l'ordre du code source : l'en-tête va dans la première piste de taille automatique, le contenu principal dans la piste 1fr et le pied de page dans la dernière piste de taille automatique. La piste 1fr prend tout l'espace disponible et s'agrandit pour combler l'écart.
Méthode alternative
Vous pouvez aussi utiliser flexbox pour créer un bas de page adhérant.
<div class="wrapper">
<header class="page-header">Ceci est l'en-tête</header>
<main class="page-body">
<p contenteditable>
Le pied de page colle au bas même si ce paragraphe est court. Ajoutez du
contenu dans cette zone modifiable pour voir le pied de page descendre
lorsque c'est nécessaire pour s'adapter au contenu.
</p>
</main>
<footer class="page-footer">Bas de page adhérant</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;
}
L'exemple flexbox commence de la même manière, mais nous utilisons display:flex au lieu de display:grid sur le .wrapper ; nous appliquons aussi flex-direction à column. Ensuite, nous appliquons flex-grow: 1 au contenu principal et flex-shrink: 0 aux deux autres éléments — cela les empêche de rétrécir lorsque le contenu remplit la zone principale.