Comment - Hauteur égale
Apprenez à créer des colonnes de hauteur égale avec CSS.
Comment créer des colonnes de hauteur égale
Lorsque vous avez des colonnes qui doivent apparaître côte à côte, vous souhaiterez souvent qu'elles soient de hauteur égale (correspondant à la hauteur de la plus haute).
Le problème:
Le désir:
Étape 1) Ajoutez du HTML :
Exemple
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Étape 2) Ajoutez CSS :
Exemple
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Hauteur égale réactive
Les colonnes que nous avons créées dans l'exemple précédent sont réactives (si vous redimensionnez la fenêtre du navigateur dans l'exemple d'essai, vous verrez qu'elles s'ajustent automatiquement à la largeur et à la hauteur nécessaires). Cependant, pour les petits écrans (comme les smartphones), vous voudrez peut-être qu'ils s'empilent verticalement plutôt qu'horizontalement :
Sur écrans moyens et grands :
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Sur petits écrans :
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Bonjour le monde.
Pour ce faire, ajoutez une requête multimédia et spécifiez une valeur de pixel de point d'arrêt pour le moment où cela doit se produire :
Exemple
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Hauteur et largeur égales à l'aide de Flexbox
Vous pouvez également utiliser Flexbox pour créer des boîtes de hauteur égale :
Exemple
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Remarque : Flexbox n'est pas pris en charge dans Internet Explorer 10 et les versions antérieures.
Conseil : En savoir plus sur les boîtes flexibles dans notre didacticiel CSS Flexbox .