Hoe - Gelijke hoogte
Leer hoe u kolommen van gelijke hoogte maakt met CSS.
Kolommen met gelijke hoogte maken
Als je kolommen hebt die naast elkaar moeten verschijnen, wil je vaak dat ze even hoog zijn (gelijk aan de hoogte van de hoogste).
Het probleem:
Het verlangen:
Stap 1) HTML toevoegen:
Voorbeeld
<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>
Stap 2) CSS toevoegen:
Voorbeeld
.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 */
}
Responsieve gelijke hoogte
De kolommen die we in het vorige voorbeeld hebben gemaakt, zijn responsive (als je het browservenster in het try it-voorbeeld vergroot of verkleint, zul je zien dat ze zich automatisch aanpassen aan de benodigde breedte en hoogte). Voor kleine schermen (zoals smartphones) wilt u misschien dat ze verticaal worden gestapeld in plaats van horizontaal:
Op middelgrote en grote schermen:
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Op kleine schermen:
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Hallo Wereld.
Om dit te bereiken, voegt u een mediaquery toe en geeft u een breekpuntpixelwaarde op voor wanneer dit zou moeten gebeuren:
Voorbeeld
/* 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%;
}
}
Gelijke hoogte en breedte met Flexbox
U kunt Flexbox ook gebruiken om dozen van gelijke hoogte te maken:
Voorbeeld
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Let op: Flexbox wordt niet ondersteund in Internet Explorer 10 en eerdere versies.
Tip: Lees meer over flexibele dozen in onze CSS Flexbox Tutorial .