{column-fill:auto} Welche Höhe zum Füllen des Viewports?
Ich habe eine Liste mit vielen Einträgen von geringer Länge (2-3 Worte, gegen Umbruch geschützt).
Diese Liste soll - solange die Fläche des Displays genügt - ohne Scrollen sichtbar sein: in einer mehrspaltigen Darstellung.
Die erste Spalte soll genau bis zum Ende des Viewports reichen. Die nachfolgenden Spalten ebenfalls, solange noch Inhalt genug dafür da ist.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Zeitungssatz</title>
<style>
article { column-count: 20 }
article { column-fill: auto }
article { column-width: 49.00ex } /*Entspricht ca. 55 Zeichen pro Zeile. Zeichenzahl in der Zeit beträgt pro Zeile ca. 44 Zeichen.*/
body { font-family: "Minion Pro", serif }
h1 { font-size: 1.75em } /*[Registerhaltigkeit]*/
article { height: calc(100vh - 1.20em) }
p { line-height: 1.40 } /*[Registerhaltigkeit] Grundlinienrastermaß: 1.40em*/
h1 { line-height: 1.60 } /*[Registerhaltigkeit] (2xGrundlinienrastermaß)/Schriftgröße h1 = Zeilenhöhe:(2x1.40em)/1.75em=1.60*/
body { margin: 0.60em }
p:last-child{ margin-bottom: 0 }
p { margin-bottom: 1.40em } /*[Registerhaltigkeit] Abstand = Grundlinienrastermaß*/
h1 { margin-bottom: 0.80em } /*[Registerhaltigkeit] Grundlinienrastermaß/Schriftgröße = Abstand: 1.40/1.75em=0.80em*/
p, h1 { margin-top: 0 }
p { max-width: 49.00ex }
p { orphans: 2 } /*Keine Unterstützung durch Firefox*/