Comment aligner le contenu d'une div vers le bas

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 d'en-tête est à 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 au 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.

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

-----------------------------
| Titre d'en-tête
|
|
|
| contenu d'en-tête (résultant en une ligne)
-----------------------------

Et s'il y avait trois lignes:

-----------------------------
| Titre d'en-tête
|
| le contenu de l'en-tête (ce qui est
| beaucoup de choses qu'il parfaitement
| s'étend sur trois lignes)
-----------------------------

Comment cela peut-il être fait en CSS?

Le positionnement relatif + absolu est votre meilleur pari:

#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">Some content</div>
</div>

Mais vous pouvez rencontrer des problèmes avec cela. Lorsque je l'ai essayé, j'ai eu des problèmes avec les menus déroulants apparaissant sous le contenu. Ce n'est tout simplement pas joli.

Honnêtement, pour les problèmes de centrage vertical et, bien, tous les problèmes d'alignement vertical avec les éléments ne sont pas à hauteur fixe, il est plus facile d'utiliser simplement des tables.

Exemple: pouvez-vous faire cette mise en page HTML sans utiliser de tableaux?

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 l'a noté cletus , 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>

Si vous n'êtes pas préoccupé par les navigateurs hérités, utilisez une flexbox.

L'élément parent a besoin que son type d'affichage soit défini sur flex

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

Ensuite, vous définissez 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/

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

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

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

• Ne nécessite pas 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 la div du conteneur).
• Fonctionne sur tous les navigateurs (IE8 +).
• Simple à mettre en œuvre.

La solution n'en prend qu'un <div>, que j'appelle le "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 fonctionne en créant un div grand et maigre, qui pousse la ligne de base du texte au fond du conteneur.

Voici un exemple complet qui réalise ce que le PO demandait. J'ai fait le "bottom_aligner" épais et rouge à des fins de 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>

La manière moderne de le faire serait d'utiliser la flexbox . Voir l'exemple ci-dessous. Vous n'avez même pas besoin d'encapsuler Some text...dans une balise HTML, car 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 que du texte et que vous souhaitez vous aligner verticalement sur le fond 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>

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

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

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

Vous pouvez simplement atteindre le 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>

Si vous avez plusieurs éléments de hauteur dynamique, utilisez les valeurs d'affichage CSS du tableau et de la cellule de tableau:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

J'ai créé une démo JSBin ici: http://jsbin.com/INOnAkuF/2/edit

La démo propose également un exemple d'alignement vertical au centre en utilisant la même technique.

Voici une autre solution utilisant flexbox mais sans utiliser flex-end pour l'alignement inférieur. L'idée est de régler margin-bottomsur h1 sur auto pour pousser le contenu restant vers le bas:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

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

Nous pouvons également faire de même avec margin-top:autole texte, mais dans ce cas, nous devons l'envelopper dans un divou span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

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

Vous n'avez pas besoin d'un absolu + relatif pour cela. Il est tout à fait possible d'utiliser la position relative pour le conteneur et les données. Voilà comment vous le faites.

Supposons que la hauteur de vos données va être x. Votre conteneur est relatif et le pied de page est également relatif. Tout ce que vous avez à faire est d'ajouter à vos données

bottom: -webkit-calc(-100% + x);

Vos données seront toujours au fond de votre conteneur. Fonctionne même si vous avez un conteneur avec une hauteur dynamique.

HTML sera comme ça

<div class="container">
  <div class="data"></div>
</div>

CSS sera comme ça

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Exemple en direct ici

J'espère que cela t'aides.

Voici la manière flexible de le faire. Bien sûr, il n'est pas pris en charge par IE8, comme l'utilisateur en avait besoin il y a 7 ans. Selon ce dont vous avez besoin, certaines d'entre elles peuvent être supprimées.

Pourtant, ce serait bien s'il y avait un moyen de le faire sans conteneur externe, il suffit que le texte s'aligne à l'intérieur de 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;
}

une solution très simple, sur une seule ligne, consiste à ajouter une hauteur de ligne au div, en gardant à l'esprit que tout le texte du 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 voulez simplement que le texte à l'intérieur de div descende, si vous devez combiner des images et des trucs, vous devrez coder un CSS un peu plus complexe et réactif

si vous pouviez définir la hauteur de la division enveloppante du contenu (# header-content comme indiqué dans la réponse des autres), au lieu de la #header entière, vous pouvez peut-être également 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

Semble fonctionner:

HTML: je suis en bas

css:

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

Toutes ces réponses et aucune n'ont fonctionné pour moi ... Je ne suis pas un expert de la flexbox, mais c'était assez facile à comprendre, c'est simple et facile à comprendre et à utiliser. Pour séparer quelque chose du reste du contenu, insérez un div vide et laissez-le grandir pour remplir l'espace.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Cela réagit comme prévu lorsque le contenu inférieur n'est pas de taille fixe également lorsque le conteneur n'est pas de taille fixe.

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

Définissez la hauteur du div d'en-tête. Puis à l'intérieur, stylisez votre H1tag comme suit:

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

Je travaille sur un site pour un client, et la conception nécessite que le texte soit au bas d'une certaine div. J'ai obtenu le résultat en utilisant ces deux lignes, et cela fonctionne très bien. De plus, si le texte se développe, le remplissage restera toujours le même.

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

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

}

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

essayez avec:

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

essayez de changer le% pour le corriger. Exemple: 120% ou 90% ... etc.

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

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

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

Un exemple parfait de navigateur croisé est probablement celui-ci ici:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

L'idée est à la fois d'afficher le div en bas et de le faire y coller. Souvent, l'approche simple fera défiler le div collant avec le contenu principal.

Voici un exemple minimal pleinement fonctionnel. Notez qu'aucune astuce d'intégration de div n'est requise. Les nombreux BR sont juste pour forcer une barre de défilement à apparaître:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

Si vous vous demandez si votre code ne fonctionne pas sur IE, n'oubliez pas d'ajouter la balise DOCTYPE en haut. Il est crucial que cela fonctionne sur IE. En outre, cela devrait être la première balise et rien ne devrait apparaître au-dessus.

Semble fonctionner:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Utiliser moins rend la résolution d'énigmes CSS beaucoup plus semblable au codage qu'à ... J'adore simplement CSS. C'est un vrai plaisir quand on peut changer toute la mise en page (sans la casser :) juste en changeant un paramètre.

Solution 2015

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

vous êtes le bienvenu