column-height CSS property
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die column-height-CSS-Eigenschaft legt die Höhe der Spalten in einem mehrspaltigen CSS-Layout fest.
Syntax
/* Keyword value */
column-height: auto;
/* <length> value */
column-height: 300px;
column-height: 25em;
column-height: 70vh;
/* Global values */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;
Werte
Diese Eigenschaft wird mit einem einzelnen Wert aus der folgenden Liste angegeben:
auto-
Der Anfangswert. Wenn für den Inhaltscontainer eine Höhe festgelegt ist, wachsen die Inhaltsspalten bis zu dieser Höhe. Passt der Inhalt nicht in den Container, ragen weitere Spalten seitlich darüber hinaus. Ist für den Inhaltscontainer keine Höhe festgelegt, wird der Inhalt gleichmäßig auf die im Container erzeugten Spalten verteilt.
<length>-
Die Höhe der Spalten. Der Wert darf nicht negativ sein.
Beschreibung
Die Eigenschaft column-height legt die Höhe der Spalten in einem mehrspaltigen Layout fest. Damit lässt sich die Spaltenhöhe zugunsten der Lesbarkeit begrenzen, wenn mit der Eigenschaft column-count oder column-width mehrere Spalten eingerichtet werden.
Ohne column-height müssen Leser bis zum Ende einer Spalte hinunterscrollen und anschließend wieder zum Anfang der nächsten Spalte hinaufscrollen, wenn der mehrspaltige Inhalt höher als der Viewport ist. Eine mögliche Lösung wäre, dem Inhaltscontainer eine feste Höhe zu geben. Zusätzliche Spalten ragen dann jedoch seitlich über den Container hinaus, sodass Leser in Inline-Richtung scrollen müssen, um den gesamten Inhalt zu lesen.
Mit der Eigenschaft column-height können Sie zusammen mit column-wrap eine bestimmte Spaltenhöhe festlegen und die Spalten in eine neue Spaltenreihe umbrechen lassen, sobald der Rand des Containers erreicht ist.
Der Standardwert von column-wrap ist auto. Wenn column-height auf einen <length>-Wert gesetzt ist, wird daraus wrap; dadurch können die Spalten mit fester Höhe auf mehrere Reihen verteilt werden. Wenn column-height den Wert auto hat, wird column-wrap: auto zu nowrap. Bei einer festgelegten Containerhöhe können die Spalten dadurch horizontal über den Container hinausragen. Aufgrund dieses Standardverhaltens müssen Sie die Eigenschaft column-wrap in der Regel nicht ausdrücklich festlegen.
Die Eigenschaft column-height kann zusammen mit column-count und column-width auch über die Kurzschreibweise columns festgelegt werden.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Blockcontainer außer Tabellen umgebende Boxen |
| Vererbt | Nein |
| Berechneter Wert | auto if specified as auto, otherwise for <length> the absolute value specified |
| Animationstyp | by computed value type |
Formale Syntax
column-height =
auto |
<length [0,∞]>
Beispiele
Grundlegende Verwendung
Dieses Beispiel zeigt, wie mit der Eigenschaft column-height ein mehrspaltiges Layout mit Spaltenumbruch erstellt wird.
HTML
Wir verwenden ein Gedicht von Dr. Seuss in einem <ol> mit 28 <li>-Elementen. Darauf folgt der Name des Autors in einem <p>-Element.
<ol>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
...
</ol>
<p>-- Dr. Seuss</p>
CSS
Wir machen das <ol>-Element zu einem mehrspaltigen Container, indem wir die Eigenschaft column-width auf 150px setzen. So enthält der Container möglichst viele Spalten, die jeweils mindestens 150px breit sind. Die Eigenschaft gap mit dem Wert 2em legt sowohl einen horizontalen Abstand zwischen den Spalten als auch einen vertikalen Abstand zwischen den Spaltenreihen fest. Anschließend setzen wir column-height auf 2em. Dadurch wird der Standardwert auto der Eigenschaft column-wrap zu wrap, und die Spalten werden auf mehrere Reihen verteilt.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Ergebnis
Spalten mit Scroll-Snapping
Dieses Beispiel kombiniert ein mehrspaltiges Layout mit Spaltenumbruch und CSS Scroll-Snapping. Bei jedem Scrollvorgang rastet eine neue Spaltenreihe innerhalb der gesamten Viewport-Höhe ein, sodass der Inhalt bequem gelesen werden kann.
HTML
Das HTML enthält mehrere Textabsätze von den MDN-Startseiten für HTML, CSS und JavaScript. Der Kürze halber ist es ausgeblendet.
CSS
Zunächst legen wir mit column-width für das <body>-Element die bevorzugte Spaltenbreite fest. Ein gap-Wert von 3em 2em erzeugt einen Abstand von 3em zwischen den Reihen und von 2em zwischen den Spalten. column-rule fügt in der Mitte des Abstands zwischen den Spalten eine Linie hinzu. Mit column-height: 95vh sind die Spalten fast so hoch wie der Viewport.
Wir setzen column-wrap ausdrücklich auf wrap, um auf das Umbruchverhalten hinzuweisen. Wir hätten auch auto verwenden oder die Eigenschaft ganz weglassen können, da column-wrap standardmäßig zu wrap wird, wenn column-height auf einen <length>-Wert gesetzt ist.
body {
column-width: 150px;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
column-height: 95vh;
column-wrap: wrap;
}
Als Nächstes setzen wir die Eigenschaft column-span des Elements <h1> auf all, damit sich die Überschrift über alle Spalten erstreckt. Außerdem setzen wir margin-top für das erste <p>-Element auf 0, damit es auf derselben Höhe wie der obere Rand der Spalten beginnt.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Zuletzt fügen wir Scroll-Snapping hinzu: Wir setzen scroll-snap-type für das <html>-Element auf y mandatory und scroll-snap-align für die ::column-Pseudoelemente, die die einzelnen erzeugten Spalten darstellen, auf start. Dadurch rastet der Inhalt bei jedem Scrollvorgang am oberen Rand einer neuen Spalte ein.
html {
scroll-snap-type: y mandatory;
}
::column {
scroll-snap-align: start;
}
Ergebnis
Scrollen Sie durch den Inhalt. Beachten Sie, wie jede neue Spaltenreihe den Viewport ausfüllt und der Inhalt bei jedem Scrollvorgang am oberen Rand einer neuen Reihe einrastet.
Experimentierfeld für column-height und column-count
Dieses Beispiel baut auf dem vorherigen auf und ergänzt zwei Schieberegler, mit denen Sie die Anzahl und die Höhe der Spalten im mehrspaltigen Layout anpassen können.
HTML und JavaScript
Das HTML entspricht dem vorherigen Beispiel. Zusätzlich enthält es ein Formular mit zwei <input="range">-Elementen, die die Werte für column-count und column-height über JavaScript aktualisieren. Das HTML und JavaScript sind der Kürze halber ausgeblendet.
CSS
Wir legen für column-rule und gap dieselben Werte wie im vorherigen Beispiel fest. Eine column-width geben wir nicht an. Stattdessen erstellen wir mit der Eigenschaft column-count ein mehrspaltiges Layout und legen die Anzahl der Spalten und die Höhe der Spaltenreihen interaktiv über JavaScript fest. Scroll-Snapping ist in diesem Beispiel nicht enthalten.
body {
column-count: 3;
column-height: 20em;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
}
Ergebnis
Ändern Sie die Anzahl der Spalten und die Spaltenhöhe, um die Wirkung dieser Eigenschaften zu sehen.
Spezifikationen
| Spezifikation |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-height |
Browser-Kompatibilität
Siehe auch
column-countcolumn-width- Kurzschreibweise
columns column-wrap- Modul Mehrspaltiges CSS-Layout