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

Le positionnement relatif+absolu est votre meilleure chance :

#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>

Mais vous risquez de rencontrer des problèmes avec ça. Lorsque je l'ai essayé, j'ai eu des problèmes avec les menus déroulants qui apparaissaient sous le contenu. Ce n'est pas très joli.

Honnêtement, pour les problèmes de centrage vertical et, en fait, pour tout problème d'alignement vertical lorsque les éléments ne sont pas de hauteur fixe, il est plus facile d'utiliser des tableaux.

Exemple : Pouvez-vous réaliser cette mise en page HTML sans utiliser de tableaux ?

Answer 2

Si vous n'êtes pas préoccupé par les anciens navigateurs, utilisez un flexbox.

Le type d'affichage de l'élément parent doit être défini sur flex.

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

Ensuite, vous définissez le paramètre align-self de l'élément enfant sur flex-end.

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

Voici la ressource que j'ai utilisée pour apprendre : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Utilisez le positionnement CSS :

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

Comme cletus a noté vous devez identifier le contenu de l'en-tête pour que cela fonctionne.

<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

J'utilise ces propriétés et ça marche !

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

Answer 5

Après avoir lutté pendant un certain temps avec ce même problème, j'ai finalement trouvé une solution qui répond à toutes mes exigences :

• Il n'est pas nécessaire que je connaisse la hauteur du conteneur.
• Contrairement aux solutions relatives+absolues, le contenu ne flotte pas dans sa propre couche (c'est-à-dire qu'il s'intègre normalement dans le div du conteneur).
• Fonctionne avec tous les navigateurs (IE8+).
• Simple à mettre en œuvre.

La solution ne prend qu'un <div> que j'appelle l'"aligneur" :

CSS

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

html

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

Cette astuce consiste à créer un div haut et étroit, ce qui pousse la ligne de base du texte vers le bas du conteneur.

Voici un exemple complet qui réalise ce que le PO demandait. J'ai rendu le "bottom_aligner" épais et rouge pour les besoins de la démonstration uniquement.

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>