Comment aligner le contenu d'une div vers le bas


1164

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?

Réponses:


1323

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?


4
J'ai trouvé cette solution avant de demander ici, mais j'ai en quelque sorte oublié d'ajouter la position: relative; à l'en-tête div et le contenu a continué à atterrir en bas de la page. Merci
kristof

15
Vous pouvez gérer votre position déroulante avec la propriété z-index pour l'amener au premier plan. N'oubliez pas que la propriété z-index fonctionne avec des éléments positionnés de manière relative ou absolue. En outre, il n'est pas correct sémantiquement d'utiliser un tableau pour obtenir des résultats de mise en page.
Alejandro García Iglesias

1
Dans le cas du contenu textuel tel que décrit dans le problème d'origine, # header-content devrait vraiment être un pélément, ou à tout le moins unspan
Josh Burgess

2
N'utilisez pas de tableaux pour les données non tabulaires! Utilisez plutôt les propriétés d'affichage CSS display: table-cell, ou table-row, ou table. Vous n'aurez plus jamais besoin d'utiliser des tableaux pour une mise en page pure.
Jeremy Moritz

1
La position de l'en-tête est relative à quoi?
stack1

158

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>

4
fyi ... cela a fait que mon contenu d'en-tête a réduit sa largeur, j'ai donc dû ajouter un width = '100%'sur le contenu d'en-tête
dsdsdsdsd

2
@dsdsdsdsd Vous pouvez également résoudre ce problème en ajoutant display: block à # header-content.
Patrick McElhaney

1
@dsdsdsdsd La raison en est que les <span>éléments ont display: inline;par défaut, ce qui ne prend pas toute la largeur du conteneur. La solution la plus appropriée consisterait à remplacer la plage par a <div>, qui est un élément de bloc par défaut.
BadHorsie

1
Ou l'un de <h1> - <h6> qui est également bloqué par défaut et identifie le texte comme un en-tête, ce qui est utile pour les moteurs de recherche, les technologies d'assistance et les personnes qui lisent le code.
Patrick McElhaney

Ne fonctionne pas lorsque le contenu en bas a une hauteur variable, il se prolonge hors des limites du conteneur.
Mozfet

126

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/


@bafromca, deux raisons qui ne fonctionnent pas. 1: Utilisez 'align-self' au lieu d'aligner-items (ma faute, j'ai édité mon message d'origine). 2: 100% de la hauteur ne fonctionnera que si le parent a la hauteur.
Lee Irvine

Cela n'a pas fonctionné pour moi, je le veux au fond du conteneur, pas à la fin des articles dans le conteneur.
Mozfet

En 2020, cela devrait être la bonne réponse: caniuse.com/#feat=flexbox
tonygatta

119

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

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

42
N'est pas pris en charge dans IE8 et versions antérieures. Il est pris en charge dans IE9.
random_user_name

23
@cale_b Selon caniuse.com il DOES travail dans IE8.
Zach Lysobey

5
@ZachL Happenstance - Je prends en charge une application héritée dans IE8 pour un client d'entreprise et cela fonctionne en fait .
Daniel Szabo

4
@fguillen: également testé dans Chrome (v31). Fonctionne là aussi.
Daniel Szabo

5
table-cellcasse beaucoup de choses. Comme le système de grille Bootstrap. col-md-12ne vous donnera plus une div 100% large.
Noah

65

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>

Aligner le contenu inférieur


Presque parfait :) mais il ne permet pas les sauts de ligne automatiques.
Gaston Sanchez

Ne fonctionne pas si le conteneur externe peut défiler (overflow-y: auto). :(
ecraig12345

Je suppose que marin: 8px devrait être une marge: 8px
Graham Perrin

2
Cela fonctionne également si mis dans une ::beforerègle, ce qui supprime le besoin d'un élément supplémentaire. Nous avons utilisé flex à la fin, mais cela est utile lorsque vous ne le pouvez pas.
Sheepy

C'est une très bonne solution. Cela ne fonctionne que si le heightde la boîte / conteneur et ses parents est défini (sur px ou% ou autre).
BairDev

38

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>


2
J'avais besoin que mon élément aligné en bas soit toujours présent dans le flux de documents, ce qui n'est pas possible lors de l'utilisation position:absolute;. Cette solution a parfaitement fonctionné pour mon cas!
Swen

1
À l'intérieur des composants réactifs, c'est la bonne solution. La solution acceptée échoue.
Soleil - Mathieu Prévot

1
C'est la seule solution qui a réellement fonctionné pour moi. Peut-être que cela a à voir avec React, comme @Soleil l'a mentionné ... Je ne suis pas un expert CSS, donc je ne suis pas tout à fait sûr.
BK

Fonctionne parfaitement dans le composant
React

25

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


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

2
Notez que flexbox n'est pas bien pris en charge dans les anciens navigateurs.
AnthonyB

11
@AnthonyB - définir vieux? Nous devons changer cet enregistrement en tant que développeurs. La technologie va de l'avant et les anciens ne survivent tout simplement pas. IE9 et 10 ont des problèmes avec flex d'après ce que je peux voir, mais ils ont été publiés respectivement en 2011 et 2012 ... c'est 2017. Nous devons abandonner ces navigateurs obsolètes et cassés. Sinon pour la satisfaction visuelle, mais pour la sécurité et les mises à jour logicielles générales.
Tisch

3
@Tisch vous avez absolument raison, nous devons, en tant que développeurs, utiliser une technologie décente et récente. Mais je voudrais simplement mettre en garde contre ce problème de compatibilité, afin de ne pas être surpris.
AnthonyB

si le contenu sous le <h1>est dans <p>ou <div>j'utiliserais justify-content: space-between.
agapitocandemor

11

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>


6

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.


5

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>


Perfecto! gracias
Grace Nikole

4

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.


Pouvez-vous expliquer ce qui bottom: -webkit-calc(-100% + x);se passe?
mhatch

@mhatch il garde le pied de page au fond du conteneur.
Aditya Ponkshe

4

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

4

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


3

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


3

Semble fonctionner:

HTML: je suis en bas

css:

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

3

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.


3

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.


1
Fera flotter le contenu sur les autres contenus lors du redimensionnement des écrans à l'aide de mises en page réactives.
Mozfet

2

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;

}

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


1
Cela provoque le redimensionnement de la div supérieure. Ce qui fonctionne pour les mises en page de texte de base, mais ne fonctionne pas lorsque les choses ont des arrière-plans et des couleurs et des tailles à respecter.
Mozfet

0

essayez avec:

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

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


Fonctionne parfaitement avec 1 jeu de contenu, mais devra être ajusté si le contenu change. Si c'est du contenu dynamique, ne l'utilisez pas!
Mike Graf

0

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

1
Votre première déclaration padding: 0 30pxest un peu redondante, vous auriez tout aussi bien pu mettre padding: 30pxles 2 autres déclarations.
Andrew

Absolument vrai, cependant je suis les pratiques de mon lieu de travail.
Nicki L. Hansen du

6
Vraiment?, Cela semble être une mauvaise pratique. Utilisez simplement le raccourci ou soyez explicite partout. padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;Quatre explicites padding-règles, ou même @ suggestion de TheWaxMann sont tous supérieurs - et je suis prêt et capable de faire valoir que l' on ;-)
Zach Lysobey

-3

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.


28
Puisque vous déclarez votre document comme XHTML strict, vous devez également fermer automatiquement vos <br />balises ...
Amos M. Carpenter

7
@ KarlKildén si vous faisiez référence au commentaire de aaamos, ce n'est certainement pas un commentaire stupide - le fait de servir le document ci-dessus avec son en- tête correctcontent-type entraînerait une erreur d'analyse XML pour le navigateur.
Razor

7
C'est une mauvaise pratique! Utilisez plutôt CSS!
m93a

-4

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.


-7

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


3
La disposition des tableaux pour cela peut être problématique; CSS est recommandé à la place. La propriété valign n'est pas non plus prise en charge en HTML5. (voir w3schools.com/tags/att_td_valign.asp )
undeniablyrob
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.