Comment aligner le contenu d'un div en bas de page

Question

Disons que j'ai le code CSS et HTML suivant :

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

La section de l'en-tête est de hauteur fixe, mais le contenu de l'en-tête peut changer.

Je voudrais que le contenu de l'en-tête soit aligné verticalement sur le bas de la section d'en-tête, de sorte que la dernière ligne de texte "colle" au bas de la section d'en-tête.

Ainsi, s'il n'y a qu'une seule ligne de texte, ce serait comme :

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

Et s'il y avait trois lignes :

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

Comment faire cela en CSS ?

Answer 1

La façon moderne de le faire serait d'utiliser flexbox . Voir l'exemple ci-dessous. Vous n'avez même pas besoin d'envelopper Some text... dans n'importe quelle balise HTML, puisque le texte directement contenu dans un conteneur flex est enveloppé dans un élément flex anonyme.

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>

S'il n'y a qu'un peu de texte et que vous voulez l'aligner verticalement au bas du conteneur.

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

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

Answer 3

Les éléments inline ou inline-block peuvent être alignés au bas des éléments de niveau bloc si la hauteur de ligne de l'élément parent/block est supérieure à celle de l'élément inline.*

balisage :

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

*assurez-vous que vous êtes en mode standard

Answer 4

Vous pouvez simplement réaliser un 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>

Answer 5

Vous pouvez utiliser l'approche suivante :

.header-parent {
  height: 150px;
  display: grid;
}

.header-content {
  align-self: end;
}

<div class="header-parent">
  <h1>Header title</h1>
  <div class="header-content">
    Header content
  </div>
</div>