Ich bin gerade dabei mich mit dem Framework Bootstrap zu beschäftigen. Dabei tauchte mal wieder das Problem der gleich langen Spalten auf, das anscheinend in den zugehörigen Anleitungen nirgends beschrieben wird. Ein dreispaltiges Lyout beschreibt man dort z.B. mittels:
<div class="container">
<div class="row">
<div class="col-md-3">Spalte1</div>
<div class="col-md-6">Spalte2</div>
<div class="col-md-3">Spalte3</div>
</div>
</div>
Leider sind dabei die Spalten ungleich hoch, abhängig von der Menge an Text, wenn sie einen Hintergrund besitzen. Eine einfache Lösung besteht darin zwei zusätzlich CSS-Klassen einzuführen:
.equal{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
.equalheight {
overflow: hidden;
}
Die drei Spalten werden durch den negativen unteren Rand sehr weit ausgedehnt, gleichzeitig wird dies durch das gleichgroße Padding wieder aufgehoben. Alle Spalten haben also quasi einen unteren Farbigen Rand von 9999 Pixeln. Das äußere Element schneidet den überflüssigen Teil durch das overflow: hidden dann ab, wodurch alle Spalten die gleiche Länge bekommen.
<div class="container equalheight">
<div class="row">
<div class="col-md-3 equal">Spalte1</div>
<div class="col-md-6 equal">Spalte2</div>
<div class="col-md-3 equal">Spalte3</div>
</div>
</div>
Weitere Lösungen zu dem gleichen Problem finden sich auf folgenden Seiten: