Comment aligner le contenu d'un div pour le bas?

dis 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. J'aimerais 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 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 dans CSS?

974
demandé sur Pooja Kedar 2009-02-25 16:15:09

24 réponses

par rapport+positionnement 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 pourriez 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. C'est juste pas assez.

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

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

1150
répondu cletus 2017-09-20 11:21:41

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 cletus , a noté, vous devez identifier l'en-tête de contenu pour faire ce travail.

<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> 
135
répondu Patrick McElhaney 2017-05-23 12:34:50

j'utilise ces propriétés et il fonctionne!

#header {
  display: table-cell;
  vertical-align: bottom;
}
102
répondu Igor Ivancha 2016-02-09 10:32:52

si vous n'êtes pas inquiet au sujet des navigateurs traditionnels, utilisez un flexbox.

l'élément parent doit avoir son type d'affichage réglé sur flex

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

ensuite, vous définissez l'élément enfant align-self à 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/

83
répondu Lee Irvine 2015-01-22 18:34:44

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:

  • N'exige pas que je sais que le conteneur de hauteur.
  • Contrairement aux solutions relatives + absolues, le contenu ne flotte pas dans sa propre couche (c'est-à-dire qu'il s'incorpore normalement dans le conteneur div).
  • fonctionne à travers les navigateurs (IE8+).
  • Simple à mettre en œuvre.

la solution ne prend qu'un <div> , que j'appelle "l'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 une div grande, mince, qui pousse la ligne de base du texte au fond du conteneur.

voici un exemple complet qui réalise ce que l'OP demandait. J'ai fait l' "bottom_aligner" épais et rouge uniquement à des fins de démonstration.

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
répondu Greg Prisament 2016-05-26 12:27:46

les éléments Inline ou inline-bloc peuvent être alignés avec le bas des éléments de niveau bloc si la ligne-hauteur 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 que vous êtes en mode standard

22
répondu dougwig 2016-02-09 10:24:03

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 une étiquette HTML, puisque le texte directement contenu dans un conteneur flex est enveloppé dans un article 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 qu'un texte et que vous voulez 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>
22
répondu Stickers 2017-01-15 19:59:24
display: flex;
align-items: flex-end;
17
répondu user3053247 2017-04-24 04:53:07

si vous avez plusieurs éléments de hauteur dynamique, utilisez les valeurs d'affichage CSS de la table et de la table-cellule:

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 de JSBin ici: http://jsbin.com/INOnAkuF/2/edit

la démo a aussi un exemple comment centrer verticalement l'alignement en utilisant la même technique.

3
répondu romiem 2016-02-09 10:32:06

vous n'avez pas besoin d'absolu+relatif pour cela. Il est tout à fait possible d'utiliser la position relative pour les conteneurs et les données. C'est la façon dont 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 récipient. Fonctionne même si vous avez conteneur avec hauteur dynamique.

HTML sera comme ceci

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

CSS sera comme ceci

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

Live exemple ici

Espérons que cette aide.

2
répondu Aditya Ponkshe 2015-02-06 12:49:56

Voici la façon flexible de le faire. Bien sûr, il n'est pas supporté par IE8, comme l'utilisateur avait besoin il y a 7 ans. Selon ce que vous avez besoin de soutenir, certains d'entre eux peuvent être éliminés.

pourtant, ce serait bien s'il y avait un moyen de le faire sans un conteneur extérieur, juste avoir le texte aligné 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;
}
2
répondu absynthe minded web smith 2016-06-07 20:33:12

, Vous pouvez simplement réalisé 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>
2
répondu MK Vimalan 2018-05-23 06:08:28

je sais que c'est vieux de plus de 2 ans, mais j'ai conçu une façon qui est beaucoup plus simple que ce qui a été mentionné.

définit la hauteur de l'en-tête div. Ensuite, à l'intérieur de cela, style votre étiquette 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 fond d'une certaine div. J'ai atteint le résultat en utilisant ces deux lignes et ça marche très bien. Aussi, si le texte ne s'élargir, le remplissage sera restent toujours les mêmes.

1
répondu mickburkejnr 2011-08-11 15:33:28

si vous pouviez définir la hauteur de la div d'enrubannage du contenu (#en-tête-contenu comme indiqué dans la réponse de l'autre), au lieu de l'en-tête # entier, peut-être que vous pouvez 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;
}

afficher sur codepen

1
répondu codeboy 2014-07-12 07:28:33

semble fonctionner:

HTML: Je suis en bas

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
1
répondu Admin File3 2016-02-22 19:17:50

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
répondu XMaster 2016-11-09 09:42:44
#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
répondu user841657 2017-10-23 00:41:23

Voici une autre solution utilisant flexbox mais sans utiliser flex-end pour l'alignement du fond. L'idée est de mettre margin-bottom sur h1 à auto pour pousser le contenu restant au fond:

#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 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>
1
répondu Temani Afif 2017-12-28 22:01:09

une solution très simple, en une seule ligne, est d'ajouter ligne-heigth à la div, en ayant à l'esprit que tout le texte de la div va descendre 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 que c'est une solution pratique et rapide quand vous voulez juste le texte à l'intérieur de div descendre, si vous avez besoin de combiner des images et des trucs, vous aurez à coder un peu plus complexe et responsive CSS

1
répondu Pablo Contreras 2018-02-01 13:17:23

essayez avec:

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

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

0
répondu felix 2013-01-21 03:51:55

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

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 coller là. Souvent, l'approche simple fera défiler le Sticky div vers le haut avec le contenu principal.

ci-dessous est un exemple de fonctionnement minimal. Notez qu'il n'y a pas de supercherie de div embedding requis. Les nombreux BRs 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 pour cela de travailler sur IE. En outre, cela devrait être la première étiquette et rien ne devrait apparaître au-dessus.

0
répondu Fakeer 2013-05-30 07:07:47

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

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
0
répondu Nicki L. Hansen 2016-02-09 10:29:03

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

en utilisant moins rend la résolution des puzzles CSS beaucoup plus comme le codage que comme... J'adore le CSS. C'est un vrai plaisir quand vous pouvez changer la mise en page entière (sans la casser :) juste en changeant un paramètre.

-3
répondu esp 2013-01-04 14:44:31

2015 solution

<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

votre accueil

-8
répondu waza123 2015-01-10 22:56:34