Question Comment aligner le contenu d'un div vers le bas?


Dites 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 une 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.

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

-----------------------------
| 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 cela peut-il être fait en CSS?


955
2018-02-25 13:15


origine


Réponses:


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. Quand j'ai essayé, j'ai eu des problèmes avec les menus déroulants apparaissant sous le contenu. Ce n'est 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 fixes en hauteur, il est plus facile d'utiliser des tables.

Exemple: Pouvez-vous faire cette mise en page HTML sans utiliser de tables?


1134
2018-02-25 13:20



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

134
2018-02-25 13:18



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

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

100
2018-04-25 09:43



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

L'élément parent a besoin que son type d'affichage soit activé

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

Ensuite, vous définissez align-self de l'élément enfant à flex-end.

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

Voici la ressource que j'avais l'habitude d'apprendre: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


76
2017-08-25 20:46



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 connais la hauteur du conteneur.
  • Contrairement aux solutions relatives + absolues, le contenu ne flotte pas dans sa propre couche (c'est-à-dire, il est intégré normalement dans la div conteneur).
  • Fonctionne à travers les navigateurs (IE8 +).
  • Simple à mettre en œuvre.

La solution prend juste un <div>, que j'appelle le "aligner":

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 maigre, 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 fait le "bottom_aligner" épais et rouge à des fins de démonstration seulement.

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>

Align bottom content


62
2017-07-18 17:11



Les éléments en ligne ou en ligne peuvent être alignés en 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


22
2017-12-04 22:16



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 contenu directement dans un conteneur flexible est enveloppé dans un élément flexible 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 y a seulement du texte et que vous voulez aligner verticalement au 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>


21
2017-11-24 02:53