HTML-Elemente am unteren Rand positionieren: So gelingt das Layout

Wer HTML-Text unten platzieren möchte, etwa einen Button am Fuß einer Karte oder den Footer am unteren Bildschirmrand, stößt schnell auf ein Grundprinzip von CSS: Der normale Dokumentfluss stapelt Inhalte von oben nach unten. Damit Text unten landet, braucht es eine bewusste Entscheidung für ein Layoutmodell. Dieser Beitrag vergleicht die drei gängigen Methoden Flexbox, absolute Positionierung und CSS Grid, jeweils mit Code, Container-Hierarchie und Hinweisen zur Browserunterstützung.

#grundlagen-der-vertikalen-ausrichtung-warum-text-unten-platzieren-oft-schwierig-istGrundlagen der vertikalen Ausrichtung: Warum Text unten platzieren oft schwierig ist

Horizontal auszurichten ist in CSS seit jeher einfach: text-align: center oder margin: 0 auto erledigen das. Vertikal sieht es anders aus. Der Grund liegt nicht in fehlenden Eigenschaften, sondern in der Logik des Blocklayouts.

Der normale Fluss stapelt von oben

Blockelemente wie div, p oder section beginnen im normalen Fluss immer oben im Elternelement und folgen einander nach unten. Ein Element weiß dabei nichts vom freien Platz unter sich. Wer Text an den unteren Rand bringen will, muss das Elternelement deshalb in ein anderes Layoutmodell versetzen (Flexbox oder Grid) oder das Kindelement aus dem Fluss herausnehmen (absolute Positionierung).

Ohne Höhe kein unten

Der häufigste Fehler ist ein Container ohne definierte Höhe. Ein Blockelement ist standardmäßig genau so hoch wie sein Inhalt. Dann gibt es keinen freien Raum, in den ein Element nach unten rutschen könnte, und jede Ausrichtung bleibt scheinbar wirkungslos. Der Container braucht also eine Höhe: als feste Angabe (height: 300px), als Mindesthöhe (min-height: 100vh) oder implizit, weil er in einer Flex- oder Grid-Zeile auf die Höhe seiner Nachbarn gestreckt wird.

Warum vertical-align selten hilft

vertical-align klingt nach der passenden Eigenschaft, wirkt aber nur auf Inline-Elemente, Inline-Blöcke und Tabellenzellen. Auf einen gewöhnlichen div angewendet, passiert nichts. Früher wurde deshalb display: table-cell mit vertical-align: bottom als Umweg genutzt. Für neue Projekte ist das nicht mehr nötig. Wenn Sie gerade erst eine Website aufsetzen und Werkzeuge auswählen, gibt der Überblick Webdesign für Gründer Orientierung zu Ablauf und Kosten.

#methode-1-flexbox-als-moderner-standard-für-die-positionierungMethode 1: Flexbox als moderner Standard für die Positionierung

Flexbox ist für eindimensionale Layouts gedacht, also für eine Reihe oder eine Spalte. Es wird in allen aktuellen Browsern vollständig unterstützt und ist für die meisten Fälle, in denen Text unten stehen soll, die erste Wahl. Entscheidend ist die Unterscheidung zweier Achsen: Die Hauptachse folgt flex-direction, die Querachse steht senkrecht dazu. justify-content verteilt Elemente entlang der Hauptachse, align-items und align-self richten sie auf der Querachse aus.

Alle Kinder nach unten: justify-content: flex-end

Soll der gesamte Inhalt eines Containers am unteren Rand stehen, setzen Sie die Hauptachse auf vertikal und packen die Elemente an ihr Ende:

<div class="box">
  <p>Erste Zeile</p>
  <p>Zweite Zeile</p>
</div>

.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
}

Beide Absätze stehen nun gemeinsam unten. Die Reihenfolge im Quelltext bleibt erhalten, was für Screenreader und Tastaturnavigation wichtig ist.

Ein einzelnes Element nach unten: margin-top: auto

In der Praxis soll meist nur ein Element nach unten, zum Beispiel der Button einer Produktkarte, während Überschrift und Text oben bleiben. Dafür eignet sich ein automatischer Außenabstand:

.karte {
  display: flex;
  flex-direction: column;
}

.karte .button {
  margin-top: auto;
}

margin-top: auto nimmt den gesamten freien Platz oberhalb des Buttons ein und schiebt ihn so an den unteren Rand. Stehen mehrere Karten in einer Flex- oder Grid-Zeile, werden sie auf gleiche Höhe gestreckt, und alle Buttons liegen auf einer Linie. Das ist die sauberste Lösung für Kartenraster.

align-self: flex-end in der Zeilenrichtung

Bei flex-direction: row, dem Standardwert, verläuft die Querachse vertikal. Hier richtet align-self: flex-end ein einzelnes Element unten aus, während seine Geschwister oben bleiben:

.zeile {
  display: flex;
  min-height: 200px;
}

.zeile .hinweis {
  align-self: flex-end;
}

Verwechseln Sie die Achsen nicht: In einer Spalte (column) wirkt align-self horizontal, in einer Zeile (row) vertikal. Wie solche Bausteine in einer kleinen Website zusammenkommen, zeigt der Leitfaden zum Website-Aufbau.

#methode-2-absolute-positionierung-für-den-exakten-unteren-randMethode 2: Absolute Positionierung für den exakten unteren Rand

Absolute Positionierung nimmt ein Element aus dem normalen Fluss und setzt es relativ zu einem Bezugsrahmen. Sie eignet sich für Überlagerungen, etwa eine Bildunterschrift über einem Foto oder ein Badge in der Ecke einer Karte.

Das Zusammenspiel von relative und absolute

Der Bezugsrahmen eines absolut positionierten Elements ist sein nächster Vorfahre, der selbst positioniert ist, also ein anderes position als static hat. Deshalb erhält das Elternelement üblicherweise position: relative:

<figure class="bild">
  <img src="foto.jpg" alt="Werkstatt von innen">
  <figcaption class="unterzeile">Bildunterschrift</figcaption>
</figure>

.bild {
  position: relative;
}

.bild .unterzeile {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

bottom: 0 legt die untere Kante des Elements bündig auf die untere Innenkante des Bezugsrahmens. left: 0 und right: 0 ziehen es über die volle Breite. Fehlt position: relative am Elternelement, sucht der Browser weiter nach oben. Findet er keinen positionierten Vorfahren, dient der anfängliche umgebende Block als Bezug, und der Text landet am unteren Rand des ersten Bildschirmausschnitts statt in der Karte.

Die Nebenwirkungen

Weil das Element den Fluss verlässt, reserviert der Container keinen Platz mehr dafür. Der übrige Inhalt kann darunter laufen und wird überdeckt. Abhilfe schafft ein unterer Innenabstand am Container, der mindestens der Höhe des positionierten Elements entspricht, zum Beispiel padding-bottom: 3rem. Bei Text mit variabler Länge ist das fehleranfällig: Wird die Unterzeile auf schmalen Bildschirmen zweizeilig, reicht der Abstand nicht mehr. Für Inhalte, deren Höhe Sie nicht kennen, ist Flexbox deshalb die bessere Wahl, weil sie den Platz selbst berechnet.

fixed und sticky

Zwei verwandte Werte beziehen sich nicht auf ein Elternelement. position: fixed mit bottom: 0 heftet ein Element an den unteren Rand des Viewports, also des sichtbaren Browserfensters; es bleibt beim Scrollen stehen. Typisch sind Cookie-Hinweise oder Aktionsleisten auf Mobilgeräten. position: sticky mit bottom: 0 verhält sich dagegen wie ein normales Element im Fluss und bleibt nur so lange am unteren Rand kleben, wie sein Elternelement sichtbar ist. Beide Varianten verdecken Inhalt, wenn Sie keinen Abstand dafür einplanen.

#methode-3-css-grid-für-maximale-kontrolle-in-komplexen-layoutsMethode 3: CSS Grid für maximale Kontrolle in komplexen Layouts

CSS Grid ist das zweidimensionale Layoutmodell von CSS und wird seit 2017 von allen großen Browsern unterstützt. Es eignet sich, wenn Sie Zeilen und Spalten gleichzeitig steuern wollen, etwa für ein ganzes Seitenlayout mit Kopf, Inhalt und Fuß.

grid-template-rows: auto 1fr auto

Das bekannteste Beispiel ist der Sticky Footer: Der Footer soll am unteren Bildschirmrand stehen, auch wenn die Seite wenig Inhalt hat.

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
}

Bei drei Kindern, header, main und footer, erhalten Kopf und Fuß ihre natürliche Höhe (auto), während 1fr dem Hauptbereich den gesamten restlichen Platz zuweist. Der Footer wird dadurch nach unten gedrückt. Auf Mobilgeräten kann 100vh größer sein als der sichtbare Bereich, weil die Adressleiste ein- und ausfährt. Die Einheit 100dvh (dynamische Viewport-Höhe) berücksichtigt das und wird von Chrome ab Version 108, Firefox ab 101 und Safari ab 15.4 unterstützt.

align-self: end und align-content: end

Innerhalb einer Grid-Zelle richtet align-self: end ein einzelnes Element an der Unterkante seiner Zelle aus:

.raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 240px;
}

.raster .notiz {
  align-self: end;
}

align-content: end wirkt dagegen auf das gesamte Raster: Sind die Zeilen zusammen niedriger als der Container, rutschen alle Zeilen gemeinsam nach unten. Als Kurzform für beide Achsen gibt es place-self und place-content. Wer Inhalte über viele Seiten gliedert, sollte auch die Verbindungen zwischen diesen Seiten planen; warum das wichtig ist, erläutert der Beitrag über interne Verlinkung.

#sonderfall-text-unten-im-blocklayout-mit-align-contentSonderfall: Text unten im Blocklayout mit align-content

Seit 2024 lässt sich align-content auch auf gewöhnliche Blockcontainer anwenden, ohne display: flex oder display: grid. Ein div mit fester Höhe und align-content: end schiebt seinen Inhalt dann an den unteren Rand. Unterstützt wird das ab Chrome 123, Firefox 125 und Safari 17.4. Für ein einzelnes Textfeld ist das die kürzeste Lösung. Wenn Ihre Besucher auch ältere Browserversionen nutzen, bleibt Flexbox die sichere Variante, denn in Browsern ohne Unterstützung wird die Eigenschaft im Blocklayout schlicht ignoriert und der Text bleibt oben.

#fazit-und-best-practices-welche-methode-für-welches-szenarioFazit und Best Practices: Welche Methode für welches Szenario?

Alle drei Methoden bringen Text an den unteren Rand. Sie unterscheiden sich darin, ob das Element im Fluss bleibt, wie sie mit variabler Inhaltshöhe umgehen und wie viel Code nötig ist.

Drei Regeln helfen bei der Entscheidung. Erstens: Bleibt der Inhalt im Fluss, wächst das Layout mit, wenn sich Textlängen ändern. Flexbox und Grid sind deshalb der Normalfall, absolute Positionierung die Ausnahme für Überlagerungen. Zweitens: Prüfen Sie immer, ob der Container eine Höhe hat; das löst die meisten Fälle, in denen scheinbar nichts passiert. Drittens: Ändern Sie mit CSS nur die Darstellung, nie die logische Reihenfolge. Ein Element, das im Quelltext oben steht und optisch unten erscheint, wird von Screenreadern weiterhin zuerst vorgelesen.

Für ein Kartenraster reicht Flexbox. Für ein Seitengerüst ist Grid übersichtlicher. Einen Überblick, wie solche Entscheidungen in den gesamten Gestaltungsprozess passen, gibt der vollständige Guide zum Webdesign.

#häufige-fragen-faqHäufige Fragen (FAQ)