L'effet pantacourt
Vous vous demandez ce que c'est, l'effet pantacourt ? Qu'on pourrait aussi appeler The Capri effect ? C'est ce que nous allons voir dans cet article et surtout voir comment l'éviter avec une méthode simple.
Quand on travaille avec un CMS et qu'on développe des thèmes de site, on ne connait pas en avance la quantité de contenu qu'on aura sur notre page. Généralement, une page même avec un contenu assez court, s'affiche plutôt bien.
Là ou ça se complique c'est quand, pour une raison X ou Y, on affiche des pages qui n'ont pas de contenus. On aperçoit alors le fond de notre page web. Et c'est pas joli joli. Voyez plutôt :
Alors comment éviter ça ?
Déjà commençons par le commencement : le problème. Ici nous avons 4 grandes sections, enfants directs de notre balise body. Le contenu n'étant pas assez grand - ou bien c'est notre écran qui l'est trop - notre page est moins haute que le viewport du navigateur.
Si vous ne le faites pas déjà, je vous conseille d'utiliser la propriété suivante sur vos sites, qui permettra de mieux gérer les tailles de vos éléments.
*, *::before, *::after {
box-sizing: border-box;
}Grâce à cette propriété CSS, un élément avec width: 200px; fera toujours 200 pixels de large, même avec un padding.
Étape 1 : un summer body
On va d'abord commencer par appliquer un style minimal sur notre body afin qu'il prenne par défaut toute la hauteur disponible dans le viewport. Et qui dit hauteur de viewport dit unité vh.
body {
min-height: 100vh;
}Étape 2 : être flex
Ensuite, on va utiliser un layout avec flexbox sur notre page et le disposer en colonne afin de reproduire le comportement par défaut des éléments de type block en HTML : un largeur de 100% et une hauteur qui dépend du contenu à l'intérieur.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}Étape 3 : bien élever ses enfants
Notre contenu étant maintenant flexible, nous allons devoir choisir lequel de nos enfants prendra le reste de la place disponible.
/* notre section de contenu */
.content {
flex-grow: 1;
}La valeur de flex-grow est par défaut à 0. Nos autres sections ne grandiront donc qu'en fonction de leur contenu. En passant cette propriété à 1, notre section de contenu va pouvoir prendre le reste de la place disponible à l'intérieur de son parent en flexbox. Mâlin.
Le code au complet
*, *::before, *::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* notre section de contenu */
.content {
flex-grow: 1;
}Allez, maintenant qu'on soit clair entre nous, je ne veux plus voir ces pantacourts, oust ! À bientôt pour de nouvelles astuces et...
Capri ! C'est fini !
...pour la chanson dans la tête, c'est cadeau. https://www.youtube.com/watch?v=vx5Qgp_0V50
PS : Pour ceux qui ne l'ont pas, un pantacourt c'est aussi appelé un Capri, ou un pantalon cigarette. Si vous souhaitez briller en société, n'hésitez pas à lire l'explication sur Wikipédia. Un bijou.