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

Die moderne Art, dies zu tun, wäre die Verwendung von flexbox . Siehe das folgende Beispiel. Sie müssen nicht einmal die Some text... in ein beliebiges HTML-Tag einfügen, da Text, der direkt in einem Flex-Container enthalten ist, in ein anonymes Flex-Element eingeschlossen wird.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Wenn nur etwas Text vorhanden ist und Sie diesen vertikal am unteren Rand des Containers ausrichten möchten.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Answer 2

Ich bin schon mehrmals auf dieses Problem gestoßen, und es gibt gute, aber auch weniger gute Lösungen. So kann man dies auf unterschiedliche Weise mit Flexbox, mit dem Grid-System oder mit Display Table erreichen. Meine bevorzugte Variante ist eine Mischung aus flex und 'margin-bottom: auto'. Hier ist meine persönliche Sammlung von Text-Bottom-Möglichkeiten:

1. Flex / margin-top: auto;

.parent {
  min-height: 200px;  
  background: green;
  display: flex;  
}  

.child {    
  margin-top: auto;
  background: red;
  padding:5px;
  color:white;
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

2. Flex / sich selbst ausrichten: flex-end

.parent {
  display: flex;
  min-height: 200px;  
  background: green;
}

.child {
  align-self: flex-end;
  background: red;
  padding: 5px;
  color: white;
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

3. Flex / align-items: flex-end;

.parent {
  min-height: 200px;  
  background: green;
  display: flex;       
  align-items: flex-end; 
}  

.child {  
  padding: 5px;
  background: red;
  color: white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

4. Raster / selbst ausrichten: Ende;

.parent {
  min-height: 200px;  
  background: green;  
  display: grid;  
}  

.child {  
  align-self: end;
  background: red;
  padding:5px;
  color:white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

5. Tabelle / vertikale Ausrichtung: unten;

Mir persönlich gefällt dieser Ansatz bei Tisch nicht.

.parent {
  min-height: 200px;  
  background: green;  
  display: table;
  width:100%;
}  

.child {
  display: table-cell;
  vertical-align: bottom;
  background: red;
  padding:5px;
  color:white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

Mit Abstandshalter

6. Flex; / flex: 1;

.parent {
  min-height: 200px;  
  background: green;  
  display: flex;
  flex-flow: column;
}  

.spacer {
  flex: 1;    
}
.child {
  padding: 5px;
  background: red;
  color: white;
}

<div class="parent">  
  <div class="spacer"></div>
  <div class="child">Bottom text</div>  
</div>

7. Flex / flex-grow: 1;

.parent {
  min-height: 200px;  
  background: green;  
  display: flex;
  flex-direction: column;
}  

.spacer {
  flex-grow: 1;
}

.child {  
  padding: 5px;
  background: red;
  color: white;
}

<div class="parent">  
  <div class="spacer"></div>
  <div class="child">Bottom text</div>  
</div>

8. Inline-Block / PseudoClass::before

.parent {
  min-height: 200px;  
  background: green;  
}

.child::before {
  display:inline-block;
  content:'';
  height: 100%;
  vertical-align:bottom;  
}

.child {  
  height:200px;
  padding: 5px;
  background: red;
  color: white;  

}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

Meine persönlichen bevorzugten Versionen sind: 1., 2. und 3.

Answer 3

display: flex;
align-items: flex-end;

Answer 4

Inline- oder Inline-Block-Elemente können am unteren Rand von Elementen der Blockebene ausgerichtet werden, wenn die Zeilenhöhe des übergeordneten/Block-Elements größer ist als die des Inline-Elements.*

Aufschlag:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*Stellen Sie sicher, dass Sie im Standardmodus sind

Answer 5

Sie können einfach erreicht flex

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>