CSS height • Höhe von HTML-Elementen

CSS width height

CSS height legt die Höhe eines Blocks fest und wirkt nur bei Block-Elementen und ersetzen Elementen (Elemente, die von den Stilen des aktuellen Dokuments nicht betroffen sind wie iframe, video und img), nicht aber bei inline-Elementen wie a, em oder span. Was so einfach klingt wie Breite und Höhe erweist sich schnell als Fass ohne Boden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

CSS height – die Höhe von Elementen

Zur Höhe eines Elements zählt genauso wie bei width das padding, nicht aber border und margin.

Boxen ohne und mit padding
Die Console des Browsers zeigt Breite und Höhe inkl. border an.
.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 Werte 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.

Übergroßes Bild fließt über
.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.

margin-bottom: 140px verhindert, dass der untere Bildausschnitt schon über den folgenden Inhalt läuft, denn er wird trotz height: 240px angezeigt.

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

Wenn der Inhalt eines Block für das umfassende Element zu groß ist, fließt Text weiter, auch wenn die Höhe angegeben ist und trotz der Beschränkung max-height.

.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.

%

Relativ zum Wert des Eltern-Elements

em

Relativ zur Schriftgröße des Eltern-Elements

vh

1% der Höhe des Browserfensters

px

Absolute Größe in Pixel

rem

Relativ zur Schriftgröße des Root-Elements

vw

1% der Breite des Browserfensters

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 relative Maßeinheiten aus: Prozentangabe sind meist die einfachste Lösung. Das gilt allerdings nur für die Breite. Bei der Höhe von Elementen bewirkt die Angabe von 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.

Auf dem Handy öffnen
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, nicht aber auf dem Handy: Dort läßt sich die Seite nach oben scrollen, so dass der Inhalt verschwindet.

height-screen-1-452 height-screen-1-452

Eigentlich müsste der blaue Rand des Blocks im Browserfenster sichtbar 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.

Bei einem Browserfenster von 1200 x 800 px ist 1vmin 8px, 1vmax ist 12px.

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.