Breite, Höhe und ihre Grenzen

Breite und Höhe sehen aus wie zwei Angaben derselben Sorte. Im Web sind sie das nicht, und der Unterschied ist der Grund für einen guten Teil aller Layout-Probleme.

Der Grund: eine Seite ist waagerecht begrenzt und senkrecht offen. Wie breit das Fenster ist, weißt du nicht. Wie viel Text jemand hineinschreibt, auch nicht.

01 / 04Breite setzen und begrenzen

Neben width gibt es min-width und max-width, und im Alltag sind die beiden Grenzen nützlicher als die feste Angabe.

max-width sagt: höchstens so breit. Ist weniger Platz da, wird das Element schmaler, ohne dass du etwas dafür tun musst. Das ist die halbe Miete für jede Seite, die auch auf einem Telefon funktionieren soll.

min-width sagt umgekehrt: mindestens so breit. Das braucht man seltener, aber es rettet Elemente davor, so schmal zu werden, dass ihr Inhalt unlesbar umbricht.

02 / 04Feste Höhen sind fast immer ein Fehler

<div class="kasten fest">Feste Höhe von 80px. Dieser Text ist deutlich länger, als in 80 Pixel hineinpasst, und läuft deshalb unten heraus.</div>
<div class="kasten mindestens">Mindesthöhe von 80px. Derselbe lange Text, aber der Kasten wächst einfach mit und alles bleibt drin.</div>

.kasten {
  width: 240px;
  padding: 12px;
  margin-bottom: 16px;
  background-color: #dbeafe;
}

/* Sagt: genau so hoch. Der Rest muss draußen bleiben. */
.fest {
  height: 80px;
}

/* Sagt: so hoch mindestens. Wachsen ist erlaubt. */
.mindestens {
  min-height: 80px;
}

Der obere Kasten hat height: 80px, und der Text darin schert sich nicht darum. Er läuft unten heraus und legt sich über das, was darunter kommt.

Der untere Kasten hat min-height: 80px. Er ist mindestens so hoch, wächst aber mit, wenn mehr hineinkommt.

Der Unterschied ist im Beispiel harmlos, in echten Projekten nicht. Texte werden übersetzt und dabei länger, Nutzer stellen die Schriftgröße hoch, Inhalte kommen aus einer Datenbank. Eine feste Höhe ist eine Wette darauf, dass sich nie etwas ändert.

Faustregel: setz Höhen als min-height, außer du hast einen konkreten Grund für das Gegenteil. Solche Gründe gibt es, etwa bei einem Bild mit festem Seitenverhältnis, und dann ist die Angabe bewusst gewählt statt geraten.

03 / 04Das Muster für den Inhaltsbereich

Drei Zeilen, die auf fast jeder Seite im Web stehen.

<div class="inhalt">
  <h2>Über mich</h2>
  <p>Dieser Bereich wird nie breiter als 240px und sitzt immer mittig, egal wie breit das Fenster gerade ist.</p>
</div>

/* Das Muster für fast jeden Inhaltsbereich im Web:
   nimm den Platz, den es gibt, aber höchstens so viel,
   und teil den Rest gleichmäßig links und rechts auf.
   Die 240px sind klein gewählt, damit die Grenze auch
   auf einer schmalen Seite greift; auf einer echten
   Seite stehen dort eher 900 oder 65ch. */
.inhalt {
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
  background-color: #dbeafe;
}

width: 100% nimmt den verfügbaren Platz. max-width deckelt ihn. margin-inline: auto teilt den Rest gleichmäßig auf beide Seiten auf und zentriert damit den Block. inline steht dabei für links und rechts zusammen, es ist die Kurzform von margin-left und margin-right; woher dieser Name kommt und welche Geschwister er hat, klärt Lektion 16.2.

Warum auto zentriert: der Browser rechnet den übrigen Platz aus und verteilt ihn auf die beiden Seiten, die auto sagen. Bei zweien wird es genau die Hälfte. Senkrecht funktioniert das im normalen Textfluss nicht, dort bedeutet margin: auto schlicht null. In einem Flex- oder Grid-Container gilt das nicht mehr: dort schluckt ein automatischer Außenabstand den freien Platz auf seiner Seite, auch senkrecht. Genau davon lebt der Knopf, der in Lektion 9.8 an der Unterkante seiner Karte klebt, und der fünfte Zentrierweg in 11.2.

Die Kombination aus width: 100% und max-width ist übrigens der Grund, warum du für das Zentrieren keine Media Query brauchst. Das Element passt sich von allein an, bis zur Grenze.

04 / 04Warum 100 Prozent Höhe meistens nichts tut

Der Klassiker unter den Enttäuschungen: du schreibst height: 100% und es passiert nichts.

<div class="aussen">
  <div class="innen">Ich hätte gern die volle Höhe.</div>
</div>

/* Die Hülle hat selbst keine Höhe, sie ist genau so hoch wie
   ihr Inhalt. 100 Prozent davon ist die Höhe des Inhalts,
   also passiert nichts. Nimm die Kommentarzeichen unten weg
   und die Prozentangabe wirkt sofort. */
.aussen {
  background-color: #fef9c3;
  /* height: 200px; */
}

.innen {
  height: 100%;
  background-color: #dbeafe;
}

Eine Prozentangabe braucht einen Bezug. Bei der Breite ist der immer da, denn der Elternteil ist so breit wie der Platz, den es gibt. Bei der Höhe ist der Elternteil selbst nur so hoch wie sein Inhalt, und 100 Prozent davon ist genau die Höhe des Inhalts.

Sobald die Hülle eine eigene Höhe hat, wirkt die Angabe sofort. Nimm im Beispiel die Kommentarzeichen weg und schau zu. Für den Fall „so hoch wie der Bildschirm” gibt es außerdem eigene Einheiten, und die kommen in Lektion 5.1.