Wie man den Inhalt eines Divs am unteren Rand ausrichtet

Angenommen, ich habe den folgenden CSS- und HTML-Code:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Der Kopfbereich hat eine feste Höhe, aber der Inhalt der Kopfzeile kann sich ändern.

Ich möchte, dass der Inhalt der Kopfzeile vertikal am unteren Ende des Kopfzeilenabschnitts ausgerichtet wird, so dass die letzte Textzeile am unteren Ende des Kopfzeilenabschnitts "klebt".

Wenn es also nur eine Textzeile gibt, würde sie wie folgt aussehen:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

Und wenn es drei Zeilen wären:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Wie kann das in CSS gemacht werden?

Peter Mortensen
Bearbeitete Frage 19. Juli 2019 в 8:56
Programmierung
html css vertical-alignment
25. Februar 2009 в 1:15
15 Aufrufe
Lösung

Relative+absolute Positionierung ist die beste Lösung:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Aber das kann zu Problemen führen. Als ich es ausprobierte, hatte ich Probleme mit Dropdown-Menüs, die unter dem Inhalt erschienen. Das ist einfach nicht schön.

Ehrlich gesagt, für die vertikale Zentrierung Fragen und, gut, jede vertikale Ausrichtung Fragen mit den Elementen sind nicht feste Höhe, ist es einfacher, nur Tabellen zu verwenden.

Beispiel: Kann man dieses HTML-Layout auch ohne Tabellen erstellen?

GKFX
Bearbeitete Antwort 20. September 2017 в 11:21
Kommentare (12)

Verwenden Sie CSS-Positionierung:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Wie cletus bemerkte, müssen Sie den Header-Inhalt identifizieren, damit dies funktioniert.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
Peter Mortensen
Bearbeitete Antwort 19. Juli 2019 в 9:11
Kommentare (5)

Ich verwende diese Eigenschaften und es funktioniert!

#header {
  display: table-cell;
  vertical-align: bottom;
}
Igor Ivancha
Bearbeitete Antwort 9. Februar 2016 в 10:32
Kommentare (13)