Des colonnes de même hauteur

Question récurrente : comment faire pour avoir des colonnes de même hauteur dans notre mise en page multi-colonnes ? Kezz Bracey propose une solution astucieuse pour résoudre ce problème vieux comme CSS.

Par

Depuis que nous sommes passés des mises en pages basées sur les tables aux mises en pages CSS modernes, un problème revient régulièrement :

Comment avoir un background occupant 100% de la hauteur disponible dans ma mise en page multi-colonnes flexible ?

Il existe quelques solutions à ce dilemme, et celle que nous allons voir pourrait répondre à vos attentes si vous avez besoin de :

  1. Background images, borders, effets CSS3 etc, appliqués à vos colonnes
  2. Plus de trois colonnes
  3. Colonnes à hauteur et largeur flexibles

Regardons de quoi il s'agit.

Comportement par défaut du background d'une colonne

Nous avons ci-dessous une mise en page simple à trois colonnes, qui utilise une approche standard en faisant flotter chacune à gauche. Les colonnes s'ajustent à la hauteur de leur contenu :

3 colonnes, de hauteur inégale

Ça marche, mais ce n'est pas très beau en raison de la différence significative des hauteurs de colonnes.

Notre HTML insère trois éléments à l'intérieur d'un wrapper :

<div class="wrap">
    <div class="content">...</div>
    <div class="sidebar">...</div>
    <div class="sidebar_two">...</div>
</div>

Et le CSS est le suivant :

.content {
    width: 60%;
    float: left;
    padding: 20px 30px;
    background: #fff;
    color: #6d7072;
}
.sidebar {
    width: 20%;
    float: left;
    padding: 20px 30px;
    background: #5f6673;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two {
    width: 20%;
    float: left;
    padding: 20px 30px;
    background:#434750;
    color: #ebeef3;
    font-size: 90%;
}

Une solution : les pseudo-éléments à la rescousse

Nous voulons arriver à deux choses :

  1. Permettre à la hauteur de colonne de s'adapter de manière flexible à son contenu.
  2. Faire en sorte que la hauteur du backgound soit indépendant du contenu de la colonne.

Dans l'exemple précédent, la première condition est déjà remplie. Cependant, les règles appliquées au style de background et à la hauteur flexible font partie de la même classe, appliquée au même élément. Le background suivra donc les mêmes règles que la hauteur de colonne.

Si nous voulons que le background ait une hauteur différente, nous aurons besoin de deux éléments distincts (le background d'une part, le contenu d'autre part) auxquels appliquer les règles, chacun ayant ses règles spécifiques de hauteur. Pour créer ces éléments séparés sans ajouter de balisage supplémentaire, nous allons utiliser des pseudo-éléments.

Pour chaque colonne, nous utiliserons le pseudo-sélecteur :before pour générer un pseudo-élément auquel nous appliquerons un style de background. Puis nous utiliserons une combinaison de positionnement absolu et de z-index pour placer ces backgrounds derrière le contenu de chaque colonne et donner à toutes une hauteur égale. (NdT : pour mieux connaître les pseudo-éléments :before et :after, vous pouvez consulter cet article sympa).

Le nouveau CSS est le suivant :

//*****première colonne******

.content, .content:before {
    width:60%;
}
.content {
    float:left;
    padding: 20px 30px;
    color: #6d7072;
}
.content:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
    background: #fff;
}

//*****deuxième colonne******

.sidebar, .sidebar:before {
    width:20%;
}
.sidebar {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 60%;
    background-color: #5f6673;
}

//*****troisième colonne*****

.sidebar_two, .sidebar_two:before {
    width:20%;
}
.sidebar_two {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 80%;
    background-color: #434750;
}

Ce qui nous donne une belle présentation avec des colonnes de hauteur égale :

Comment ça marche

Pour le dire vite, ce que nous faisons ici consiste à positionner de manière absolue des pseudo-éléments “contenant le background” derrière les éléments de “contenu des colonnes”, afin de créer les styles de background.

Ces “contenants de background” étant positionnés absolument, nous pouvons leur donner les dimensions que nous voulons tout en permettant aux éléments de “contenus de colonnes” d'avoir la hauteur ou la largeur dont ils ont besoin.

L'élément .wrap , ses 3 éléments-enfants, et leurs pseudo-éléments
Chaque élément colonne a un pseudo-élément correspondant, qui sert de background

Important : Vos colonnes doivent se situer dans un conteneur parent (.wrap dans notre cas) qui doit être en position: relative pour que le positionnement absolu fonctionne (pour réviser le positionnement CSS, cliquer ici).

Autres approches

Il existe d'autres façons de résoudre le problème. Si vous n'avez pas besoin des avantages spécifiques de la méthode qui précède, vous préfèrerez peut-être une des solutions suivantes.

Flat Colors vs Background images et effets spéciaux

Si vous avez prévu de n'utiliser que des flat colors dans vos backgrounds, une solution fûtée est d'appliquer un dégradé CSS horizontal, en créant des bandes de couleur qui s'alignent avec vos colonnes. Voici ce que ça donne sur CodePen grâce à Chris Coyier (cliquez sur HTML, CSS et Result pour voir les détails) :

See the Pen Equal Height Columns with Gradients by Chris Coyier (@chriscoyier) on CodePen.

Cependant, si votre design fait appel à des images, des bordures, des effets CSS etc, alors notre technique de “contenant de background” sera sans doute mieux adaptée :

Plus ou moins de trois colonnes

Une autre solution sympa est d'utiliser les pseudo-sélecteurs :before et :after dans le conteneur parent des colonnes, pour créer jusqu'à 3 colonnes avec un background de même hauteur. Cette technique est expliquée (en anglais) par Nicolas Gallagher.

Par contre, si vous avez besoin de plus de trois colonnes, notre technique de “contenant de background” vous permet d'avoir autant de colonnes que vous le voulez.

Conclusion

Lorsque la compatibilité navigateur de Flexbox sera parfaite, tout ceci devrait être très simple à réaliser, sans avoir besoin de passer par des pseudo-éléments.

D'ici là, cette méthode nous retire une épine du pied. La largeur de vos colonnes est flexible pour s'adapter à vos mises en pages responsives, vous pouvez utiliser autant de colonnes que vous le voulez, et appliquer n'importe quel type de style de background.

Voir la démo en ligne.


Intéressé par CSS et Flexbox ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans Webdesign Tuts+.

Sur l'auteur : est freelance spécialisée dans le design web et le développement. Elle a conçu beaucoup de thèmes et de plugins pour WordPress et maintenant, via Polygonix, elle conçoit des thèmes pour la plateforme de blog Ghost [ NdT: qui héberge ce blog :) ].

Traduit avec l'aimable permission de Webdesign Tuts+ et de l'auteur.
Copyright Webdesign Tuts+ © 2014.