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 gibt die Höhe der Spalten in einem CSS-Multi-Column-Layout an.
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 Anfangswert. Wenn der Inhaltscontainer eine festgelegte Höhe hat, wachsen die Inhaltsspalten auf diese Höhe und laufen zur Seite über, wenn der Inhalt nicht in den Container passt. Hat der Inhaltscontainer keine festgelegte Höhe, 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 Multi-Column-Layout fest. Dies ist nützlich, um die Spaltenhöhe für eine bessere Lesbarkeit einzuschränken, wenn mehrere Spalten mit den Eigenschaften column-count oder column-width eingerichtet werden.
Ohne column-height, wenn die Höhe des mehrspaltigen Inhalts die Höhe des Viewports übersteigt, müssen Leser bis zum Ende einer Spalte scrollen und dann zurück nach oben zur nächsten Spalte. Eine mögliche Lösung wäre, eine feste Höhe für den Inhaltscontainer zu setzen, jedoch laufen dann überschüssige Spalten zur Seite über, und Leser müssen in der Zeilenrichtung scrollen, um den gesamten Inhalt zu lesen.
Die Eigenschaft column-height ermöglicht zusammen mit column-wrap, eine spezifische Höhe für die Spalten festzulegen und sie auf eine neue Reihe von Spalten umzubrechen, wenn die Containerkante erreicht wird.
Der Standardwert von column-wrap ist auto, was zu wrap aufgelöst wird, wenn column-height auf einen <length>-Wert gesetzt ist; wrap ermöglicht es den festgelegten Spaltenhöhen, in mehrere Reihen umgebrochen zu werden. Wenn column-height gleich auto ist, löst sich column-wrap: auto in nowrap auf, wodurch die Spalten horizontal überlaufen dürfen, falls eine feste Containerhöhe gesetzt ist. Aufgrund dieses Standardverhaltens müssen Sie die Eigenschaft column-wrap im Allgemeinen 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 demonstriert die grundlegende Verwendung der column-height-Eigenschaft, um ein umbrochenes Mehrspaltenlayout zu erstellen.
HTML
Wir fügen ein Gedicht von Dr. Seuss ein, indem wir ein <ol> mit 28 <li>s verwenden, gefolgt vom Namen des Autors in einem <p>.
<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, wobei jede mindestens 150px breit sein muss. Die Eigenschaft gap von 2em setzt einen horizontalen Abstand zwischen den Spalten und einen vertikalen Abstand zwischen den Reihen der Spalten. Wir setzen dann die column-height auf 2em, wodurch sich der Standardwert auto der Eigenschaft column-wrap zu wrap auflöst, um umgebrochene Spaltenreihen zu erzeugen.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Ergebnis
Scroll-verriegelte Spalten
Dieses Beispiel kombiniert ein umgebrochenes Mehrspaltenlayout mit CSS-Scroll-Locking und schafft eine benutzerfreundliche Erfahrung, bei der jede Scroll-Aktion eine neue Spaltenreihe sauber innerhalb der vollen Höhe des Viewports einrastet, um komfortabeles Lesen zu ermöglichen.
HTML
Das HTML, das mehrere Absätze mit Inhalten von den MDN-Seiten zu HTML, CSS und JavaScript enthält, wurde zur Übersichtlichkeit ausgeblendet.
CSS
Wir beginnen, indem wir die Eigenschaft column-width auf das <body>-Element setzen, um die bevorzugte Breite für die Spalten zu definieren. Ein gap von 3em 2em resultiert in einem Abstand von 3em zwischen den Reihen und 2em zwischen den Spalten. Die Eigenschaft column-rule fügt eine Linie in die Mitte des Abstands zwischen den Spalten ein. Die column-height von 95vh macht die Spalten fast so hoch wie den Viewport.
Wir setzen explizit column-wrap auf wrap als Erinnerung an das angewendete Umbruchverhalten. Wir hätten den Wert auf auto setzen oder die Eigenschaft ganz weglassen können, da column-wrap standardmäßig zu wrap auflöst, wenn die 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;
}
Anschließend setzen wir die column-span-Eigenschaft des <h1>-Elements auf all, damit die Überschrift über alle Spalten reicht, und setzen die margin-top-Eigenschaft des ersten <p> auf 0, sodass es mit der oberen Kante der Spalten übereinstimmt.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Schließlich fügen wir Scroll-Locking hinzu, indem wir die Eigenschaft scroll-snap-type auf y mandatory am <html>-Element setzen und scroll-snap-align auf start bei den ::column Pseudo-Elementen, die jede erzeugte Spalte repräsentieren. Dadurch rastet der Inhalt beim Scrollen an der oberen Kante einer neuen Spalte ein.
html {
scroll-snap-type: y mandatory;
}
::column {
scroll-snap-align: start;
}
Ergebnis
Versuchen Sie, den Inhalt zu scrollen. Beachten Sie, wie jede neue Spaltenreihe den Viewport ausfüllt und wie der Inhalt mit jedem Scrollen sauber an der oberen Kante einer neuen Reihe einrastet.
column-height und column-count Spielwiese
Dieses Beispiel baut auf dem vorherigen auf, indem es zwei Bereichsschieberegler enthält, mit denen Sie die Spaltenanzahl und die Spaltenhöhe des Mehrspaltenlayouts anpassen können.
HTML und JavaScript
Das HTML ist das gleiche wie im vorherigen Beispiel, mit der Ergänzung eines Formulars, das zwei <input type="range">-Elemente enthält, die die Werte für column-count und column-height über JavaScript aktualisieren. Das HTML und JavaScript sind aus Platzgründen ausgeblendet.
CSS
Wir geben die Werte für column-rule und gap wie im vorherigen Beispiel an. Wir geben keine column-width an; stattdessen erstellen wir ein Mehrspaltenlayout mit der Eigenschaft column-count, wobei die Anzahl der Spalten und die Höhe der Spaltenreihen interaktiv mit JavaScript festgelegt werden. Scroll-Locking 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 Wirkung dieser Eigenschaften zu sehen.
Spezifikationen
| Spezifikation |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-height |
Browser-Kompatibilität
Siehe auch
column-countcolumn-widthcolumnsKurzformcolumn-wrap- CSS-Multi-Column-Layout Modul