Ausführbare CSS-Docs: Breite und Höhe

Q: Was ist der Unterschied zwischen width: 100% und width: auto?

Bei einem Block-Element füllt auto den Container einschließlich Padding und Rahmen. width: 100% setzt die Inhaltsbreite auf die Breite des Containers, also lässt unter dem Standard box-sizing: content-box jedes Padding und jeder Rahmen das Element überlaufen.

Q: Was ist der Unterschied zwischen width und max-width?

width legt eine exakte Größe fest. max-width legt eine Obergrenze fest: Das Element darf schmaler sein, zum Beispiel auf dem Handy, aber nie breiter. width: 100%; max-width: 600px; füllt kleine Bildschirme und hört auf großen bei 600px auf.

Q: Wie mache ich ein Element so hoch wie den Bildschirm?

Nimm min-height: 100vh (oder 100dvh, damit die Symbolleisten mobiler Browser berücksichtigt werden). min-height statt height lässt den Abschnitt wachsen, wenn sein Inhalt höher ist als der Bildschirm.

Breite und Höhe festlegen

width und height legen die Größe der Inhaltsbox eines Elements fest. Standardmäßig kommen Padding und Rahmen außen hinzu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

Die Box ist 260 mal 100 Pixel groß: 240 mal 80 Inhalt plus 10px Padding auf jeder Seite. Mit box-sizing: border-box wäre sie genau 240 mal 80; die Seite zum Box-Modell erklärt beides.

Werte

Wert	Beispiel	Bedeutung
`auto`	`width: auto`	Der Standard. Blöcke füllen die Breite ihres Containers; die Höhe passt sich dem Inhalt an
Länge	`300px`, `20rem`	Eine feste Größe
Prozent	`50%`	Von der Breite (bei `width`) oder Höhe (bei `height`) des umgebenden Blocks
Viewport-Einheiten	`100vh`, `50vw`, `100dvh`	Vom Browserfenster
`min-content`	`width: min-content`	So schmal wie möglich, das längste Wort entscheidet
`max-content`	`width: max-content`	So breit wie der Inhalt in einer Zeile
`fit-content`	`width: fit-content`	Wie `max-content`, aber nie breiter als der Container

Warum height: 100% nichts bewirkt

Eine height in Prozent braucht ein Elternelement mit festgelegter Höhe, auf das sie sich beziehen kann. Ist die Höhe des Elternelements auto, was der Normalfall ist, verhält sich height: 100% am Kind ebenfalls wie auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

Das erste Kind ist nur so hoch wie sein Text. Das zweite füllt sein Elternelement, weil das Elternelement eine Höhe hat. Damit eine ganze Seitenkette mit Prozentwerten funktioniert, braucht jeder Vorfahr bis hinauf zu html und body eine Höhe. Deshalb setzen die meisten Layouts stattdessen auf Flexbox oder Grid: Deren Kinder strecken sich ganz ohne Prozentwerte.

min-height und max-width: Größen, die nachgeben

Feste Größen gehen leicht kaputt: Eine feste Höhe läuft über, wenn der Text länger ist als erwartet, und eine feste Breite ist zu breit für ein Handy. Die Eigenschaften mit min- und max- legen Grenzen fest statt exakter Größen.

Eigenschaft	Bedeutung
`min-width`	Nie schmaler als das
`max-width`	Nie breiter als das
`min-height`	Nie niedriger als das, darf aber wachsen
`max-height`	Nie höher als das (zusätzlicher Inhalt läuft über)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Auf einem Bildschirm, der schmaler als 360px ist, etwa einem Handy, schrumpfen die Karten mit, weil max-width nur eine Obergrenze ist.

Gelten sowohl eine Größe als auch eine Grenze, gewinnen die Grenzen: max-width schlägt width, und min-width schlägt max-width.

width: auto vs. width: 100%

Bei einem Block-Element ist es fast immer richtig, width auf auto zu lassen. auto passt die ganze Box, inklusive Padding und Rahmen, in den Container. 100% macht den Inhalt so breit wie den Container und addiert dann Padding und Rahmen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% bleibt nützlich an Elementen, die standardmäßig keine Blöcke sind (ein <input>, ein <img>, ein inline-block), am besten zusammen mit box-sizing: border-box.

An den Inhalt anpassen: fit-content

Um einen Block nur so breit wie seinen Text zu machen, ohne ihn auf inline-block umzustellen, nimmst du fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content zusammen mit margin-inline: auto zentriert ein Label oder einen buttonartigen Block, der genau so breit bleibt wie sein Text.

Abschnitte in voller Höhe und Viewport-Einheiten

vh ist 1% der Viewport-Höhe und vw 1% seiner Breite. Auf Handys wächst und schrumpft die Adressleiste des Browsers beim Scrollen, sodass 100vh höher sein kann als das, was du siehst. Die dynamische Einheit dvh folgt dem sichtbaren Bereich, und svh nimmt die kleinste sichtbare Höhe:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Nimm für bildschirmfüllende Abschnitte min-height, nicht height, damit ein kleiner Bildschirm mit viel Text trotzdem einen Abschnitt bekommt, der wächst. Eine feste Höhe mit Inhalt, der nicht hineinpasst, läuft über, und darum kümmert sich die Seite zu CSS overflow.

Häufige Fehler

height: 100% in einem Elternelement ohne Höhe. Es verhält sich wie auto. Gib dem Elternelement eine Höhe oder nimm Flex oder Grid.
width: 100% plus Padding. Das Element läuft aus seinem Container heraus. Lass die Breite von Blöcken auf auto oder nimm box-sizing: border-box.
Feste Höhen an Textcontainern. Nimm min-height, damit längerer Text oder eine größere Schrift nicht herausläuft.
width an einem Inline-Element. <span> und <a> ignorieren width und height; mach sie zu inline-block oder block.
width: 1200px an einem Seiten-Wrapper. Auf jedem Handy scrollt die Seite dann seitwärts. Nimm stattdessen max-width: 1200px.

Häufig gestellte Fragen

Warum funktioniert height: 100% nicht?

Eine Höhe in Prozent ist ein Prozentsatz der Höhe des Elternelements und funktioniert nur, wenn diese Höhe festgelegt ist. Ist die Höhe des Elternelements auto (vom Inhalt bestimmt), wird der Prozentwert als auto behandelt. Gib dem Elternelement eine Höhe oder nimm Flexbox oder Grid, die Kinder ohne Prozentwerte strecken.

Was ist der Unterschied zwischen width: 100% und width: auto?

Bei einem Block-Element füllt auto den Container einschließlich Padding und Rahmen. width: 100% setzt die Inhaltsbreite auf die Breite des Containers, also lässt unter dem Standard box-sizing: content-box jedes Padding und jeder Rahmen das Element überlaufen.

Was macht min-height in CSS?

Es legt die kleinste Höhe fest, die ein Element haben darf, und lässt es trotzdem mit seinem Inhalt wachsen. min-height: 200px gibt einer leeren Karte 200px, und eine Karte mit mehr Text wird höher, statt überzulaufen, was eine feste height nicht erlauben würde.

Was ist der Unterschied zwischen width und max-width?

width legt eine exakte Größe fest. max-width legt eine Obergrenze fest: Das Element darf schmaler sein, zum Beispiel auf dem Handy, aber nie breiter. width: 100%; max-width: 600px; füllt kleine Bildschirme und hört auf großen bei 600px auf.

Wie mache ich ein Element so hoch wie den Bildschirm?

Nimm min-height: 100vh (oder 100dvh, damit die Symbolleisten mobiler Browser berücksichtigt werden). min-height statt height lässt den Abschnitt wachsen, wenn sein Inhalt höher ist als der Bildschirm.

Verwandte Konzepte