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

J'ai imaginé un moyen beaucoup plus simple que ce qui a été mentionné.

Définissez la hauteur de la div d'en-tête. Puis, à l'intérieur de celle-ci, donnez un style à votre H1 comme suit :

float: left;
padding: 90px 10px 11px

Je travaille sur un site pour un client, et la conception exige que le texte se trouve au bas d'une certaine division. J'ai obtenu ce résultat en utilisant ces deux lignes, et cela fonctionne bien. En outre, si le texte s'étend, le remplissage reste le même.

Answer 2

J'ai trouvé cette solution basée sur un modèle de démarrage bootstrap par défaut

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

Answer 3

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

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

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

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

Answer 4

Essayez avec :

div.myclass { margin-top: 100%; }

essayez de changer le % pour le réparer. Exemple : 120% ou 90% ...etc.

Answer 5

Le site que je viens de réaliser pour un client demandait que le texte du pied de page soit une boîte haute, avec le texte en bas. J'ai obtenu cela avec un simple remplissage, cela devrait fonctionner pour tous les navigateurs.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}