column-height
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 CSS mehrspaltigen Layout fest.
Die columns Kurzschreibweise kann verwendet werden, um die Werte der Eigenschaften column-height, column-count und column-width in einer einzigen Deklaration festzulegen.
Syntax
/* Keyword */
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
auto-
Der Standardwert. Wenn der Inhaltscontainer eine festgelegte Höhe hat, wachsen die Inhaltsspalten bis zu dieser Höhe und überlaufen zur Seite, wenn der Inhalt nicht in den Container passt. Wenn der Inhaltscontainer keine festgelegte Höhe hat, wird der Inhalt gleichmäßig zwischen den im Container erzeugten Spalten verteilt.
<length>-
Die Höhe der Spalten. Muss nicht negativ sein.
Beschreibung
Die Eigenschaft column-height legt die Höhe der Spalten in einem mehrspaltigen Layout fest. Dies ist nützlich, um die Höhe der Spalten zur besseren Lesbarkeit zu begrenzen, wenn mehrere Spalten mit der Eigenschaft column-count oder column-width festgelegt werden.
Ohne column-height, wenn die Höhe des mehrspaltigen Inhalts die Höhe der Ansicht übersteigt, müssen Leser bis zum Ende einer Spalte scrollen und dann wieder nach oben zur nächsten Spalte zurückkehren. Eine mögliche Lösung wäre, eine feste Höhe für den Inhaltscontainer festzulegen. In diesem Fall werden jedoch überflüssige Spalten zur Seite überlaufen und Leser müssen in die Inline-Richtung scrollen, um den gesamten Inhalt zu lesen.
Die Eigenschaft column-height ermöglicht es zusammen mit column-wrap, eine bestimmte Höhe für die Spalten festzulegen und sie auf eine neue Reihe von Spalten umzubrechen, wenn der Rand des Containers erreicht wird.
Der Standardwert von column-wrap ist auto, was sich in wrap auflöst, wenn column-height auf einen <length> Wert gesetzt ist; wrap erlaubt es den Spalten mit fester Höhe, sich in mehrere Zeilen umzubrechen. Wenn column-height gleich auto ist, löst sich column-wrap: auto in nowrap auf, sodass die Spalten horizontal überlaufen, wenn eine feste Containerhöhe festgelegt ist. Aufgrund dieses Standardverhaltens müssen Sie die Eigenschaft column-wrap in der Regel nicht explizit festlegen.
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 die grundlegende Verwendung der Eigenschaft column-height, um ein umbrochenes Mehrspaltenlayout zu erstellen.
HTML
Wir fügen ein Gedicht von Dr. Seuss ein, welches ein <ol> mit 28 <li>s und anschließend den Namen des Autors in einem <p> enthält.
<ol>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
...
</ol>
<p>-- Dr. Seuss</p>
CSS
Wir definieren das <ol> als Mehrspaltencontainer, indem wir die Eigenschaft column-width auf 150px setzen, was bedeutet, dass der Container so viele Spalten wie möglich enthalten wird, von denen jede mindestens 150px breit ist. Die Eigenschaft gap von 2em setzt einen horizontalen Abstand zwischen den Spalten und einen vertikalen Abstand zwischen den Reihen von Spalten. Wir setzen dann die column-height auf 2em, was dazu führt, dass der Standardwert der Eigenschaft column-wrap von auto in wrap aufgelöst wird, um umbrochene Reihen von Spalten zu erstellen.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Ergebnis
Scroll-fixierte Spalten
Dieses Beispiel kombiniert ein umbrochenes Mehrspaltenlayout mit CSS-Scroll-Snap, um eine benutzerfreundliche Erfahrung zu schaffen, bei der jede Scroll-Aktion eine neue Reihe von Spalten ordentlich innerhalb der gesamten Höhe des Ansichtsfensters für komfortables Lesen einrastet.
HTML
Das HTML, das mehrere Absätze mit Inhalten von den MDN-HTML-, CSS- und JavaScript-Startseiten enthält, wurde der Kürze halber ausgeblendet.
CSS
Wir beginnen, indem wir column-width auf dem <body> Element festlegen, um die bevorzugte Breite für die Spalten zu definieren. Ein gap von 3em 2em führt zu einem 3em Abstand zwischen den Reihen und einem 2em Abstand zwischen den Spalten. Die column-rule fügt eine Linie in die Mitte des Abstands zwischen den Spalten hinzu. Die column-height von 95vh macht die Spalten fast so hoch wie das Ansichtsfenster.
Wir setzen column-wrap explizit auf wrap als Erinnerung an das angewandte Umbruchverhalten. Wir hätten den Wert auf auto setzen oder die Eigenschaft ganz weglassen können, da column-wrap standardmäßig in wrap aufgelöst 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 column-span Eigenschaft des <h1> Elements auf all, um die Überschrift über alle Spalten zu erstrecken, und setzen die margin-top Eigenschaft des ersten <p> auf 0, damit es sich mit dem oberen Rand der Spalten ausrichtet.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Schließlich fügen wir Scroll-Snapping hinzu, indem wir scroll-snap-type auf y mandatory auf dem <html> Element setzen und scroll-snap-align auf start auf den ::column Pseudo-Elementen, die jede generierte Spalte darstellen. Dies bewirkt, dass sich der Inhalt bei jedem Scrollen an die Oberseite einer neuen Spalte anpasst.
html {
scroll-snap-type: y mandatory;
}
::column {
scroll-snap-align: start;
}
Ergebnis
Versuchen Sie, den Inhalt zu scrollen. Beachten Sie, wie jede neue Reihe von Spalten den Bildschirm füllt und wie der Inhalt bei jedem Scrollen sauber an die Oberseite einer neuen Reihe anschnappt.
column-height und column-count Spielplatz
Dieses Beispiel baut auf dem vorherigen auf, indem es zwei Bereichsschieber einschließt, die es Ihnen ermöglichen, die Spaltenanzahl und die Spaltenhöhe des mehrspaltigen Layouts anzupassen.
HTML und JavaScript
Das HTML ist dasselbe wie im vorherigen Beispiel, mit der Ergänzung eines Formulars, das zwei <input="range"> Elemente enthält, die die Werte von column-count und column-height über JavaScript aktualisieren. Das HTML und JavaScript wurden der Kürze halber ausgeblendet.
CSS
Wir spezifizieren die column-rule und gap mit denselben Werten wie im vorherigen Beispiel. Wir spezifizieren keine column-width; stattdessen erstellen wir ein mehrspaltiges Layout mit der Eigenschaft column-count, indem wir die Anzahl der Spalten und die Höhe der Spaltenreihen interaktiv mit JavaScript festlegen. 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
Passen Sie die Anzahl der Spalten und die Spaltenhöhe an, um die Auswirkungen dieser Eigenschaften zu sehen.
Spezifikationen
| Specification |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-height |
Browser-Kompatibilität
Siehe auch
column-countcolumn-widthcolumnsKurzschreibweisecolumn-wrap- CSS mehrspaltiges Layout Modul