CSS, HTML & Javascript mit {stil}

CSS width / height • Breite und Höhe

HTML sieht alle Inhalte innerhalb des body-Elements als rechteckige Blöcke, die den Raum für ihre vollständige Darstellung einnehmen wollen. CSS width oder height begrenzen zwar den Raum, aber übergroße Inhalte fließen dabei über und drängen alles Folgende sozusagen »nach unten«.

CSS width height

width und height: Breite und Höhe beschränken

CSS width und height legen zwar Breite und Höhe eines HTML-Elements fest, sind aber mit Vorsicht anzuwenden:

.box {
	height: 320px;
	width: 240px;
}

.box .content {
	height: 260px;
	width: 280px;
}
Bild breiter als der Container

Die Hintergrundfarbe zeigt, dass die Box Breite und Höhe einhält. Aber übergroße Inhalte ohne weitere Formatierung fließen über – und zwar sowohl nach rechts (z.B. Bilder) als auch nach unten (z.B. Text).

  • Die Breite eines Elements wird durch die CSS-Eigenschaft width begrenzt.
    Aber ein überbreites Element wie ein Bild muss zusätzlich (z.B. durch max-width: 100% oder overflow: hidden) eingeschränkt werden.
  • Die Höhe eines HTML-Blocks mit CSS height ist hingegen nur ein Anfangswert!
    Wenn der Inhalt für das umfassende Element zu groß ist, fließt er weiter, auch wenn die Höhe der Box als CSS-Eigenschaft height angegeben ist. Das Überfließen kann durch CSS overflow verhindert werden, wobei übergroße Inhalte nicht mehr angezeigt werden. line-clamp beschränkt die Zahl der angezeigten Zeilen und ist eine weitere Möglichkeit, das Überfließen von Text zu verhindern.
  • Während padding zur Breite eines Elements gezählt wird, zählen die Browser padding, border und margin nicht zur Höhe eines Elements hinzu.
    Erst CSS box-sizing macht die Kombination von width, height, padding und border intuitiver.

Inhalt fließt über

Übergroßer Inhalt überlagert die auf die Box folgenden Inhalte oder drängt die folgenden Inhalte weiter nach unten im Dokument.

<div style="width: 350px; height: 260px; background: lavender;">
   <img src="–" width="400" height="175" alt="…" />
   <p> …  </p>
</div>

img width und height anpassen

CSS hält sich nur dann an width und height, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Für das responsive Webdesign passt CSS die Größe von Bildern an den umfassenden Block an:

img {
	width: 100%;
	height: auto;
}

Breite und Höhe einschränken

width und height und selbst min-width / min-height sind nur erste Schritte, um Blöcke in das Layout einzupassen. clamp(), min() und max() begrenzen Blöcke und Schriftgrößen und passen sie ohne zusätzliche Media Queries und Breakpoints in das Layout ein, text-overflow begrenzt einzeiligen Text auf die Breite des umfassenden Containers, wenn z.B. Überschriften grundsätzlich in eine Zeile passen sollen.

line-clamp schränkt die Zahl der Zeilen innerhalb eines Blocks ein.

CSS width / CSS height

Erblich: nein

width, height
Breite / Höhe eines Elements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten).
Werte
<length> | <%> | auto | inherit
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
basiert auf der Höhe des umfassenden Blocks, die als 100% definiert ist. Wenn die Höhe des umfassenden Blocks nicht expliziet notiert ist und der umfassende Block nicht absolut positioniert ist, wird der Wert wie "auto" interpretiert. Eine Prozentangabe für das Wurzelelement wird relativ zum Viewport interpretiert.
auto
ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

width / height in px, % oder em?

Die meistgenutzten Angaben für die Breite / Höhe von Elementen sind px, em / rem und %.

Pixel px
ist eine absolute Angabe. Wenn ein Block mit 200px Breite angegeben ist, dann ist er 200px breit, egal ob er auf einem Monitor mit 320px Breite oder mit einer Auflösung von 1980 x 1200 gerendert wird. 
<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>
Prozent %
ist eine relative Angabe und bezieht sich auf die Breite bzw. Höhe des umfassenden Blocks. 
.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}
füllt das Browserfenster vollständig.
Viewport width / height
Angabe relativ zur Größe des Viewports bzw. Browserfensters.
em / rem
em ist eine Maßangabe relativ zur Schriftgröße des umfassenden Blocks. rem ist relativ zur Schriftgröße des html-Elements (16px)
Suchen auf mediaevent.de