Höhen und Breiten mit CSS definieren

Problem

Sie wollen für bestimmte Elemente (siehe Diskussion) eine Höhe und eine Breite festlegen.

Lösung

Verwenden Sie die Eigenschaften height und width, um dem Element eine ausdrückliche Breite und/oder Höhe zuzuweisen. Der folgende Code sorgt dafür, dass das Element mit der ID #seitenleiste die gesamte Höhe und 20% der Breite des umgebenden Elements einnimmt:

#seitenleiste {
height: 100%;
width: 20%;
}

Die Höhe von 100% bezieht sich auf die Höhe des umgebenden Elements, z.B. eines div- Containers. Wurde für diesen keine ausdrückliche Höhe definiert, passt sie sich dem Inhalt an.

Diskussion

Höhe und Breite können nur für Block- und ersetzte Inline-Elemente (z.B. Bilder, Formularelemente) definiert werden. Hierbei steht die Eigenschaft height für die Höhe und width für die Breite des Elements. Als Maßeinheiten können alle in CSS gültigen Längeneinheiten sowie Prozentwerte benutzt werden. Negative Werte sind nicht möglich.