Fluid Width Equal Height Columns

Gleiche Spaltenhöhen sind seit jeher ein Bedürfnis von Webdesignern. Wenn sich alle Spalten den gleichen Hintergrund teilen, ist eine gleiche Höhe irrelevant, da Sie diesen Hintergrund auf ein Elternelement anwenden können. Wenn jedoch eine oder mehrere Spalten ihren eigenen Hintergrund benötigen, wird dies für die visuelle Integrität des Designs sehr wichtig.

Wenn ein Design eine **NICHT** fließende Breite hat, wird diese Aufgabe erheblich einfacher. Die beste Technik für ein Layout mit fester Breite ist Dan Cederholms Faux Columns, bei der die Spalten in ein Container-Element (das Sie wahrscheinlich sowieso schon haben) eingeschlossen werden und dieser Container einen vertikal wiederholten Hintergrundbild-Effekt erhält, um das Aussehen von gleich hohen Spalten zu simulieren, selbst wenn die Elemente selbst nicht tatsächlich gewachsen sind.

Wenn **fließende Breite *und* mehrere Spalten** ins Spiel kommen, wird diese Aufgabe schwieriger. Wir können kein statisches Bild mehr verwenden, um das Aussehen mehrerer Spalten zu simulieren. Aber alle Hoffnung ist nicht verloren. Im Folgenden werden wir eine Reihe verschiedener Techniken untersuchen, um fließende Spalten mit gleicher Höhe zu realisieren.

Doug Neiner Methode

Doug hat sich das vor ein paar Monaten während eines kleinen Nerd-Chats ausgedacht. Die Idee ist, CSS3-Verläufe zu verwenden, um die Spalten zu erstellen. *Verläufe?!* Tatsächlich. Wir denken normalerweise, dass Verläufe Farben über eine Distanz ineinander übergehen lassen. Wir erstellen jedoch Verläufe mit CSS, indem wir "Farbstopps" deklarieren, die spezifische Orte sind, an denen die Farbe genau wie dort angegeben ist. Der Trick besteht darin, überlappende Farbstopps zu verwenden. Auf diese Weise können Sie erreichen, dass eine Farbe endet und eine andere beginnt, ohne einen sichtbaren "Verlauf".

Schauen Sie sich an, wie Sie einen Fünf-Spalten-Hintergrund erhalten können, indem Sie einen Farbstopp bei 0 % und 100 % sowie Doppelte bei 20 %/40 %/60 %/80 % deklarieren.

.five-columns {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(20%, #eee),
    color-stop(20%, #ccc),
    color-stop(40%, #ccc),
    color-stop(40%, #eee),
    color-stop(60%, #eee),
    color-stop(60%, #ccc),
    color-stop(80%, #ccc),
    color-stop(80%, #eee),
    color-stop(100%, #eee)
	);
  background-image: -webkit-linear-gradient(
    left,
    #eee,
    #eee 20%,
    #ccc 20%,
    #ccc 40%,
    #eee 40%,
    #eee 60%,
    #ccc 60%,
    #ccc 80%,
    #eee 80%,
    #eee 100%
	);
  background-image: -moz-linear-gradient(
    left,
    #eee,
    #eee 20%,
    #ccc 20%,
    #ccc 40%,
    #eee 40%,
    #eee 60%,
    #ccc 60%,
    #ccc 80%,
    #eee 80%,
    #eee 100%
	);
  background-image: -ms-linear-gradient(
    left,
    #eee,
    #eee 20%,
    #ccc 20%,
    #ccc 40%,
    #eee 40%,
    #eee 60%,
    #ccc 60%,
    #ccc 80%,
    #eee 80%,
    #eee 100%
	);
  background-image: -o-linear-gradient(
    left,
    #eee,
    #eee 20%,
    #ccc 20%,
    #ccc 40%,
    #eee 40%,
    #eee 60%,
    #ccc 60%,
    #ccc 80%,
    #eee 80%,
    #eee 100%
	);
}

Dieses CSS wird auf einen Wrapper aller Spalten angewendet. Da wir für diese Farbstopps Prozentsätze verwenden, wird dieses simulierte Fünf-Spalten-Hintergrundbild genauso gestreckt und geschrumpft, wie Sie es in einem fließenden Breiten-Design erwarten. Sie können dies als moderne Erweiterung von Faux Columns betrachten.

Die Markup selbst ist eine Reihe von Spalten innerhalb dieses Wrappers.

<div class="five-columns group">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

Beachten Sie die Klasse "group", die die Clearfix-Klasse ist, damit der Eltern-Wrapper seine Höhe behält, obwohl er nur gefloatete Kinder enthält (er würde normalerweise kollabieren).

Ich halte das für eine ziemlich clevere Umsetzung der Idee. Beachten Sie, dass nur moderne Gecko- und WebKit-Browser CSS3-Verläufe unterstützen, sodass Ihre Opera- und älteren IE-Besucher die Spaltenhintergründe nicht sehen. Die Spaltenstruktur sollte jedoch bis hin zu IE 6 intakt bleiben.

Diese Methode ermöglicht eine Quellreihenfolge-Unabhängigkeit, indem negative und positive linke Ränder verwendet werden, um Spalten zu positionieren. Hier ist eine Demo der Doug Neiner-Methode, bei der die Spalte, die an erster Stelle in der Quellreihenfolge steht, in die Mitte verschoben wird.

Nicolas Gallagher Methode

Nicolas Gallagher hat einen Artikel veröffentlicht, der ein Juwel ist, über die Verwendung von CSS2-Pseudo-Elementen, um eine Reihe von Effekten zu erzielen, die sonst schwer zu realisieren sind oder zusätzlichen HTML-Kram erfordern.

Die Idee ist, den Eltern-Wrapper mit relativer Positionierung zu versehen. Dies setzt den Kontext für die absolute Positionierung darin. Dann machen wir jede der drei Spalten ein Drittel der Breite des Elternelements und positionieren sie relativ darin, wobei wir sie bei Bedarf mit relativer Positionierung verschieben. Dies ermöglicht auch eine Quellreihenfolge-Unabhängigkeit.

Zwei der sichtbaren Hintergrundfarbspalten werden von absolut positionierten Block-Level-Pseudo-Elementen (:before und :after) erzeugt, die wiederum ein Drittel der Breite, aber 100% der Höhe des Elternelements haben. Diese beiden "Spalten" haben einen negativen z-index-Wert, sodass sie unter dem sichtbaren Textinhalt der Spalte liegen können. Die dritte "Spalte" ist eigentlich nur die Hintergrundfarbe des Wrappers, die durchscheint. Da die Höhe des Wrappers durch die Höhe der höchsten Spalte bestimmt wird, funktioniert dies.

.pseudo-three-col {
  position: relative;
  background: #eee;
  z-index: 1;
  width: 100%;
}
.pseudo-three-col .col {
  position: relative;
  width: 27%;
  padding: 3%;
  float: left;
}
.pseudo-three-col .col:nth-child(1) { left: 33%; }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
.pseudo-three-col:before, .pseudo-three-col:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 33.4%;
  width: 33.4%;
  height: 100%;
  background: #ccc;
}
.pseudo-three-col:after {
  left: 66.667%;
  background: #eee;
}

Tabellen verwenden

Manchmal ist eine bewährte Methode, die die Arbeit erledigt, der richtige Weg. Eine Möglichkeit, die Idee von fließenden Spalten mit gleicher Höhe sicher zu realisieren, ist eine verdammte Reihe von Tabellenzellen. Nur für den Fall, dass Sie vergessen haben, wie das aussieht, es ist so

<table id="actual-table">
  <tr>
    <td>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </td>
    <td>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </td>
    <td>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </td>
    <td>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </td>
    <td>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </td>
  </tr>
</table>

Geben Sie jeder Tabellenzelle eine prozentuale Breite, die sich zu 100 % summiert, und Sie sind bestens gerüstet. Selbst wenn Sie dann den Zellen Polsterung hinzufügen, ordnet sich die Tabelle korrekt an.

#actual-table { border-collapse: collapse; }
#actual-table td {
  width: 20%;
  padding: 10px;
  vertical-align: top;
}
#actual-table td:nth-child(even) {
  background: #ccc;
}
#actual-table td:nth-child(odd) {
  background: #eee;
}

Nun sagen wir mal, dass diese Tabellen-Markup Ihnen einen Schrecken einjagt. Sie können tatsächlich eine einfache Div-Markup verwenden, sie aber trotzdem dazu zwingen, sich wie eine Tabelle zu verhalten. In diesem Fall würden wir so etwas tun

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

Und dann CSS-Tabellen verwenden

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

Neben der Verwendung einer komfortablen Markup sparen wir tatsächlich Markup, da wir direkt von der Tabelle zu den Tabellenzellen gelangen können. Kein Element muss eine Tabellenzeile simulieren.

Sind CSS-Tabellen die Antwort auf unsere Träume? Sie sind ziemlich cool, aber sie werden in IE 7 nicht unterstützt, also wenn Sie daran interessiert sind, diesen Weg zu gehen, empfehle ich einfach die Verwendung von tatsächlicher Tabellen-Markup. Es gibt wirklich keine signifikanten Vorteile bei der Verwendung von CSS-Tabellen.

Der bedeutendste Nachteil beider Tabellenmethoden ist die Abhängigkeit von der Quellreihenfolge. Es gibt wirklich keinen Weg, die erste Spalte in der Quellreihenfolge an einer anderen Stelle als der ersten Spalte erscheinen zu lassen.

One True Layout Method

Eines der klassischsten Layouts aller Zeiten ist die One True Layout. In einer der Demos wird die Lösung für gleiche Spaltenhöhen behandelt. Es ist eine ziemlich clevere Technik, die auch heute noch hervorragend funktioniert. Die Idee, wie üblich, verwendet ein umgebendes Element für alle Spalten. Dieser Wrapper erhält eine versteckte Überlauf-Eigenschaft, die nicht nur die gefloateten Spalten löscht, sondern alles ausblendet, was außerhalb liegt. Dies ist besonders wichtig, da wir die Höhe der Spalten extrem erhöhen und sie dann mit dem versteckten Überlauf abschneiden werden. Der magische Voodoo hier ist, dass wir, während wir die Spalten mit einem riesigen Bottom-Padding erhöhen, die Höhe des Wrappers mit einem gleich großen negativen Bottom-Margin wieder nach oben ziehen. Das gibt uns genau den Effekt, den wir brauchen.

Die Markup ist nichts, was wir nicht schon gesehen hätten

<div id="one-true" class="group">
  <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

Dann ist das CSS einfach gefloatete Spalten mit dem Margin/Padding-Trick.

#one-true { overflow: hidden; }
#one-true .col {
  width: 27%;
  padding: 30px 3.15% 0;
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

Beachten Sie, dass das Padding an den Unterseiten der Spalten durch den darin enthaltenen Inhalt erzeugt wird, da wir uns nicht auf das Bottom-Padding der Spalte selbst verlassen können, da es mit seinem schicken Trick beschäftigt ist. Quellreihenfolge-Unabhängigkeit ist hier genauso wie wir es bereits behandelt haben, mit dem Verschieben durch linke Ränder.

Flexbox-Methode

Flexbox kann diese Situation problemlos bewältigen. Hier ist eine Referenz für alle Funktionen und Browserunterstützung und dergleichen.

Die Markup ist wieder perfekt sauber

<div class="flexbox">
  <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

Die CSS erfordert einige Vendor-Präfixe (oder verwenden Sie Autoprefixer), um das Flex-Layout zu starten

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

Von dort aus können wir ihre Breiten ziemlich einfach ausgleichen

.flexbox .col {
  flex: 1;
}

Die Eigenschaft `align-items` kann auf `stretch` gesetzt werden, um sicherzustellen, dass sie gleich hoch sind, aber das ist der Standard! Wir müssen sie also gar nicht setzen.

Als Krönung können wir die Position der Spalten ändern, indem wir einfach ihre Reihenfolge auf die gewünschte Position setzen. Es ist am besten, alle Spalten explizit dort zu platzieren, wo Sie sie haben möchten; Ich fand, dass die Einstellung nur bestimmter Spalten problematisch war. Dennoch ist die Möglichkeit, die Position ohne Layout-Hacks zu ändern, großartig.

.flexbox .col:nth-child(1) {
  background: #ccc;
  order: 1;
}
.flexbox .col:nth-child(2) {
  background: #eee;
  order: 0;
}
.flexbox .col:nth-child(3) {
  background: #eee;
  order: 2;
}

JavaScript-Optionen

Natürlich gibt es auch JavaScript-Lösungen für gleich hohe Spalten. Wir haben das in "Equal Height Blocks in Rows" ein wenig untersucht, und es gibt eine gute CodePen Demo von Michah Godbolt, die diese Methode veranschaulicht.

Wenn Sie den Weg eines jQuery-Plugins gehen möchten, schauen Sie sich matchHeight an, das Ihnen hilft, die Höhe ausgewählter Elemente zu angleichen.

Kurze Notizen

• Die Verwendung von Prozenten für das Layout ist in WebKit nicht perfekt
• In dieser Demo habe ich Dinge wie :nth-child verwendet, um einige Spalten anzusprechen. Sie werden wahrscheinlich eine bessere browserübergreifende Kompatibilität erzielen, wenn Sie Ihren Spalten spezifische Klassennamen geben und diese Klassennamen stattdessen verwenden. Ich war mehr daran interessiert, die Theorie zu untersuchen, und einige der schicken modernen Techniken funktionieren nur in Browsern, in denen :nth-child sowieso funktioniert.
• Bonus-Tipp: Sie können eine Faux Columns-ähnliche Technik mit fließenden Spalten verwenden, wenn Sie nur zwei Spalten haben. Dies wird im aktuellen (v7) Design von CSS-Tricks verwendet. Das Layout ist eine 2-Spalten-Fließbreite, und die Hintergrundfarbe der Seitenleiste stammt von diesem Bild. Die Spalte kann wachsen, da die Platzierung dieses Hintergrunds Prozente verwendet, um sie korrekt anzupassen, wenn das Container-Element in der Breite wächst.

  background: url(sidebar.png) repeat-y 61.7% 0;

• Das flexible Layoutmodell unterscheidet sich stark vom CSS3-Layoutmodul. Anscheinend bläst der Wind in Bezug auf die tatsächliche Implementierung in Richtung flexibles Layout.