CSS height • Höhe von Elementen

CSS height – die Höhe von Elementen

Was so einfach klingt wie width und height, erweist sich schnell als Fass ohne Boden. Zur Höhe eines Elements zählt genauso wie bei width das padding, nicht aber border und margin, denn die Höhe des Inhaltsbereichs (content-box) bestimmt die Höhe des Elements. margin und border gehören nicht zum Inhaltsbereich.

.chapter1 { 
	width: 300px;
	height: 200px;
	margin: 1em;
}

.chapter2 { 
	width: 300px;
	height: 200px;
	padding: 1em;
	margin: 1em;
}

Breite und Höhe von Elementen bestehen aus dem angegebenen Wert für width und height, aber CSS nimmt border und padding in die Berechnung auf.

/* Breite */
width + padding-left + padding-right + border-left + border-right

/* Göhe */
height + padding-top + padding-bottom + border-top + border-bottom

Dieser Sicht von CSS width und height tritt heute box-sizing entgegen.

Höhe der Elemente: Übergröße und Überlauf

Die CSS-Werte eines HTML-Blocks sind nur ein Anfangswert. Wenn der Inhalt eines Block für das umfassende Element zu groß ist, dehnen z.B. ein übergroßes Bild oder iframe-Element den umfassenden Block aus, auch wenn Höhe und Breite angegeben im CSS notiert sind.

.overflow {
	width: clamp(300px, 460px, 96%); 
	height: 240px; 
	background-color: salmon; 
	padding: 10px; 
	box-sizing: border-box; 
	margin: auto; 
	margin-bottom: 140px; 
}

Bei Bildern sorgt width:100% zusammen mit height: auto dafür, dass sie evt. verkleinert werden, um sie in ihrer vollen Breite zu zeigen.

Der Überlauf durch Elemente wie img oder iframe kann durch CSS overflow: hidden verhindert werden, so dass übergroße Inhalte nicht mehr angezeigt werden.

.passage {
	width: clamp(300px, 460px, 96%); 
	max-height:100px;
	background: cornflowerblue;
	margin: 1em auto 60px auto;
}

Der Überlauf kann durch CSS overflow: hidden verhindert werden, so dass übergroße Inhalte nicht mehr angezeigt werden. overflow: scroll schneidet den Block in der vorgegebenen Höhe ab und zeigt den Inhalt erst beim Scrollen des Blocks.

Maßeinheiten für CSS height

Einheiten in Prozent beziehen sich auf die Höhe des umfassenden Elements. Die meisten Block-Elemente werden automatisch so breit wie ihr Eltern-Element, aber ohne explizite Angabe der Höhe werden sie nur so hoch wie ihr Inhalt.

Einheiten für CSS height – Probleme mit height="100%"

Für eine auf das Browserfenster und den Platz im Layout angepasste Angabe der Breite richtet sich das Webdesign heute mit relativen Maßeinheiten aus: Prozentangaben sind meist die einfachste Lösung. Das gilt allerdings nur für die Breite. Bei der Höhe von Elementen bewirkt height="100%" selten das erwünschte Ergebnis.

Ein Element mit 100% der Höhe der Seite ist ein klassischer Problemfall. Das Element wird trotz der Angabe height="100%" nur so hoch wie sein Inhalt, denn die Angabe der Höhe bezieht sich auf die Höhe des umfassenden Elements – in diesem Beispiel das body-Element. Der body wiederum nimmt nur die Höhe seines Inhalts an, also des lachsroten Blocks.

body {
	background: silver;
	margin: 0;
}

.fullscreen {
	background: salmon;
	height: 100%;
}

Die Konsole des Browsers zeigt beim Hovern über dem lachsroten Element dieselbe Höhe wie für das body-Element. Per Vorgabe haben die meisten Elemente eine Höhe von auto und nehmen den minimalen Platz ein, den sie für die Anzeige des Inhalts brauchen.

Eine relative junge Maßeinheit ist vh – die Höhe des Viewports. Mit 100vh würde das Element auf dem Desktop-Monitor nun so hoch wie das Dokument im Browserfenster. Das gilt aber nicht fürs Handy: Dort läßt sich die Seite nach oben scrollen, so dass der Inhalt verschwindet.

Eigentlich müsste der blaue Rand des Blocks im Browserfenster unsichtbar bleiben, und erst ein Stück scrollen bringt ihn zum Vorschein. Der Grund ist das Chrome des Browsers, die Adressleiste.

Da kommt die jüngste unter den Maßeinheiten zum Einsatz: dvh, die dynamische Höhe. Also:

.fullscreen {
	background: salmon;
	height: 100dvh;
}

Höhe dynamisch anpassen

vmin (Viewport Minimum) and vmax (Viewport Maximum basieren auf den Werten für vh (bzw vw). 1vmin ist 1% der kleineren Abmessung des Viewports, 1vmx ist 1% der größten Abmessung des Viewports.

Und noch einen Schritt weiter: Die CSS-Funktionen min(), max() und clamp() bestimmen die Höhe und die Breite von Elementen ohne Media Queries. Dabei ist clamp() die Kurzschrift für den gleichzeitigen Einsatz von min und max. clamp(min, val, max) gibt val zurück, es sei denn, der Wert überschreitet die Grenzen aus min und max.