web-dev-qa-db-fra.com

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

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

htmlcssvertical-alignment
1075
kristof

Le meilleur choix est le positionnement relatif + absolu:

#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 en dessous du contenu. C'est juste pas joli.

Honnêtement, pour les problèmes de centrage vertical et, ainsi, tous les problèmes d’alignement vertical avec les éléments n’ont pas une hauteur fixe, il est plus simple d’utiliser des tableaux.

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

1235
cletus

Utiliser 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 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>
148
Patrick McElhaney

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

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

Si les navigateurs existants ne vous inquiètent pas, utilisez une boîte souple.

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 l'align-self de l'élément enfant sur 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/

100
Lee Irvine

Après avoir lutté avec le 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 son propre calque (c’est-à-dire qu’il s’intègre normalement dans le conteneur div).
  • Fonctionne sur tous 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 grand 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 créé 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>

Align bottom content

62
Greg Prisament

La manière moderne de le faire serait d'utiliser ( flexbox . Voir l'exemple ci-dessous. Vous n'avez même pas besoin de placer Some text... dans une balise HTML, car le texte directement contenu dans un conteneur flex est placé 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 au bas 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>
31
Stickers
display: flex;
align-items: flex-end;
24
user3053247

Les éléments inline ou inline-block 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 inline. *

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 d'être en mode standard

23
dougwig

Vous pouvez simplement atteindre 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>
9
MK Vimalan

Si vous avez plusieurs éléments de hauteur dynamiques, utilisez les valeurs d'affichage CSS de table et de cellule de table:

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 contient également un exemple montrant comment centrer verticalement en utilisant la même technique.

4
romiem

une solution très simple, à une ligne, consiste à ajouter une hauteur de ligne à la div, tout en gardant à l'esprit que tout le texte de la div ira au fond.

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 dans div baisse, si vous devez combiner des images et d'autres éléments, vous devrez coder un code CSS un peu plus complexe et plus réactif.

3
Pablo Contreras

Voici la manière flexible de le faire. Bien entendu, il n’est pas pris en charge par IE8, car l’utilisateur en avait besoin il ya 7 ans. Selon ce que vous devez soutenir, certains d'entre eux peuvent être supprimés.

Cela dit, ce serait bien s'il y avait un moyen de faire cela sans un conteneur extérieur, il suffit de faire 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;
}
3
absynthe minded web smith

Voici une autre solution utilisant flexbox mais sans utiliser flex-end pour l'alignement inférieur. L'idée est de définir margin-bottom sur h1 sur auto sur Pousser le contenu restant au 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 la même chose avec margin-top:auto sur le texte, mais dans ce cas, nous devons l'envelopper dans un div ou 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>
2
Temani Afif

Vous n'avez pas besoin de absolu + relatif pour cela. Il est très possible d'utiliser la position relative pour le conteneur et les données. Voici comment tu le fais.

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 bas de votre conteneur. Fonctionne même si vous avez un conteneur avec une hauteur dynamique.

HTML sera comme ceci 

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

2
Aditya Ponkshe

Semble fonctionner:

HTML: je suis au bas

css:

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

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;

}
1
XMaster
#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
user841657

si vous pouviez définir la hauteur de la division d'habillage du contenu (# header-content comme indiqué dans la réponse de other), au lieu de l'intégralité de #header, vous pouvez 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

1
codeboy

Le site que je viens de créer pour un client a demandé à ce que le texte de bas de page soit une boîte en hauteur. Le texte situé au bas de la page, que j'ai réalisé 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;
}
0
Nicki L. Hansen

Un exemple multi-navigateur parfait est probablement celui-ci:

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

L'idée est à la fois d'afficher le div en bas et de le coller là-bas. Souvent, l’approche simple fait défiler le sticky div avec le contenu principal.

Voici un exemple minimal entièrement fonctionnel. Notez qu'il n'y a pas de trucs pour l'intégration de div requis. Les nombreuses RB ne servent qu'à forcer l’affichage d’une barre de défilement:

<!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 peut-être pas sur IE, pensez à 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.

0
Fakeer

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

Définir la hauteur de l'en-tête div. Ensuite, à l'intérieur, stylisez votre balise H1 comme suit:

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

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

0
mickburkejnr

Toutes ces réponses et aucune n’a fonctionné pour moi… Je ne suis pas un expert flexbox, mais c’était relativement facile à comprendre, c’est simple et facile à comprendre et à utiliser. Pour séparer quelque chose du reste du contenu, insérez une div vide et laissez-la 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 du fond n'est pas de taille fixe, même lorsque le conteneur n'est pas de taille fixe.

0
Mozfet

essayez avec:

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

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

0
felix