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

Voici le moyen le plus souple de le faire. Bien sûr, elle n'est pas prise en charge par IE8, car l'utilisateur en avait besoin il y a 7 ans. En fonction de ce que vous devez prendre en charge, certains de ces éléments peuvent être supprimés.

Cependant, ce serait bien s'il y avait un moyen de faire cela sans conteneur extérieur, en faisant simplement en sorte que le texte s'aligne sur lui-même.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

Answer 2

Une solution très simple, en une ligne, est d'ajouter line-heigth à la div, en gardant à l'esprit que tout le texte de la div ira en bas.

CSS :

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML :

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

gardez à l'esprit qu'il s'agit d'une solution pratique et rapide lorsque vous souhaitez simplement que le texte à l'intérieur d'un div descende, si vous avez besoin de combiner des images et d'autres éléments, vous devrez coder un CSS un peu plus complexe et réactif.

Answer 3

Un complément aux autres solutions flex-box mentionnées :

Vous pouvez utiliser flex-grow: 1 sur la première division. De cette façon, votre deuxième div sera aligné sur le bas tandis que la première div couvrira tout l'espace restant.

Sur la division parent, vous devez utiliser display: flex et flex-direction: column .

/* parent-wrapper div */
.container {
  display: flex;
  flex-direction: column;
}

/* first-upper div */
.main {
  flex-grow: 1;
}

Vérifiez le violon : https://jsfiddle.net/1yj3ve05/

Answer 4

Si vous pouviez définir la hauteur de la division enveloppant le contenu (#header-content comme indiqué dans la réponse d'un autre utilisateur), au lieu de l'ensemble du #header, vous pourriez peut-être aussi essayer cette approche :

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

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

#header-content span{
    display:inline-block;
}

montrer sur codepen

Answer 5

Ça a l'air de fonctionner :

HTML : Je suis au fond

css :

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