Wie man den Inhalt eines Divs am unteren Rand ausrichtet

Question

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 der Kopfzeile ausgerichtet wird, so dass die letzte Textzeile am unteren Ende der Kopfzeile "klebt".

Wenn es also nur eine Textzeile gibt, sieht es so aus:

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

Und wenn es drei Linien wären:

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

Wie kann man das in CSS machen?

Answer 1

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">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</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 ist es bei Problemen mit der vertikalen Zentrierung und, nun ja, bei Problemen mit der vertikalen Ausrichtung, wenn die Elemente keine feste Höhe haben, einfacher, Tabellen zu verwenden.

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

Answer 2

Wenn Sie nicht über Legacy-Browser besorgt sind, verwenden Sie eine Flexbox.

Der Anzeigetyp des übergeordneten Elements muss auf "Flex" eingestellt sein.

div.parent {
  display: flex;
  height: 100%;
}

Dann setzen Sie das untergeordnete Element align-self auf flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Hier ist die Quelle, die ich zum Lernen benutzt habe: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

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;
}

Como cletus notiert 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>

Answer 4

Ich verwende diese Eigenschaften und es funktioniert!

#header {
  display: table-cell;
  vertical-align: bottom;
}

Answer 5

Nachdem ich einige Zeit mit demselben Problem zu kämpfen hatte, habe ich endlich eine Lösung gefunden, die alle meine Anforderungen erfüllt:

• Es ist nicht erforderlich, dass ich die Höhe des Behälters kenne.
• Im Gegensatz zu relativen+absoluten Lösungen schwebt der Inhalt nicht in einer eigenen Ebene (d. h. er ist normal in das Container-Div eingebettet).
• Funktioniert in allen Browsern (IE8+).
• Einfach zu implementieren.

Die Lösung erfordert nur eine <div> den ich "Aligner" nenne:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Dieser Trick funktioniert, indem ein hohes, schmales Div erstellt wird, das die Textgrundlinie an den unteren Rand des Containers verschiebt.

Hier ist ein vollständiges Beispiel, das genau das erreicht, wonach der Auftraggeber gefragt hat. Ich habe die "bottom_aligner" dick und rot nur für Demonstrationszwecke gemacht.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>