Breite, Höhe und ihre Grenzen

Breite und Höhe sehen aus wie zwei Angaben derselben Sorte. Im Web sind sie das nicht, denn eine Seite ist waagerecht begrenzt und senkrecht offen. Wie breit das Fenster ist, weißt du vorher nicht. Wie viel Text jemand hineinschreibt, auch nicht.

01 / 04Breite setzen und begrenzen

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

max-width heißt 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 heißt umgekehrt mindestens so breit. Das braucht man seltener. Es hilft, wenn ein Element sonst so schmal würde, dass sein 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, aber der Text darin ist länger. 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.

Im Beispiel ist der Unterschied 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.

Ich setze Höhen als min-height, außer es gibt 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 zentrieren einen Bereich und begrenzen seine Breite.

<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 die Richtung, in der die Zeile läuft. Bei deutschem Text sind das links und rechts zusammen. Streng genommen ist es das Shorthand für margin-inline-start und margin-inline-end, und woher diese Namen kommen, steht in Abschnitt 16.

auto zentriert, weil der Browser den übrigen Platz ausrechnet und auf die beiden Seiten verteilt, die auto sagen. Bei zweien bekommt jede die Hälfte. Senkrecht klappt das im normalen Textfluss nicht, da bedeutet margin: auto schlicht null.

In einem Flex- oder Grid-Container ist das anders. Dort schluckt ein automatischer Außenabstand den freien Platz auf seiner Seite, auch senkrecht. Damit klebt in Lektion 9.8 der Button an der Unterkante seiner Karte, und in Abschnitt 11 kommt der Trick als Zentrierweg wieder.

Die Kombination aus width: 100% und max-width ist übrigens der Grund, warum du für das Zentrieren keine Media Query brauchst, denn das Element passt sich von allein an, bis es an seine Grenze stößt.

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

An einem Element steht 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. Ohne die Kommentarzeichen unten
   wirkt die Prozentangabe 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 sind eben genau die Höhe des Inhalts.

Sobald die Hülle eine eigene Höhe hat, wirkt die Angabe sofort. Im Beispiel reicht es, die Kommentarzeichen vor height: 200px wegzunehmen. Für den Fall „so hoch wie der Bildschirm“ gibt es außerdem eigene Einheiten, die kommen in Lektion 5.1.

In der Aufgabe stehen drei Größenprobleme auf einer Seite, und jedes braucht eine andere Grenze.