1358 votes

Comment aligner le contenu d'un div en bas de page

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 de l'en-tête est de 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.

Ainsi, 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 faire cela en CSS ?

11voto

Temani Afif Points 69370

Voici une autre solution utilisant flexbox mais sans utiliser extrémité flexible pour l'alignement du fond. L'idée est de mettre margin-bottom sur h1 à 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:auto sur le texte, mais dans ce cas, nous devons l'insérer dans une balise 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>

8voto

romiem Points 836

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

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 contient également un exemple de centrage vertical à l'aide de la même technique.

8voto

Vinu Prasad Points 615

La meilleure solution possible pour déplacer un div vers le bas est la suivante. En gros, ce que vous devez faire, c'est définir display flex et flex-direction comme une colonne pour le parent et ajouter un 'margin-top : auto' à son enfant qui doit être déplacé vers le bas du conteneur. Note : J'ai utilisé bootstrap et ses classes.

.box-wrapper {
  height: 400px;
  border: 1px solid #000;
  margin: 20px;
  display: flex; // added for representation purpose only. Bootstrap default class is already added
  flex-direction: column;
}

.link-02 {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
  <div>incidunt blanditiis debitis</div>
    <div class="news-box">
      <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
      <p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
    </div>
  <a href="https://oscar.com" target="_blank" class="link-02">
    This is moved to bottom with minimal effort
  </a>
</div>

7voto

Mozfet Points 269

Toutes ces réponses et aucune n'a fonctionné pour moi... Je ne suis pas un expert en flexbox, mais cela a été raisonnablement 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 s'agrandir 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 et lorsque le conteneur n'est pas de taille fixe.

6voto

Aditya Ponkshe Points 823

Vous n'avez pas besoin d'une position absolue+relative pour cela. Il est tout à fait possible d'utiliser la position relative pour le conteneur et les données. Voici comment procéder.

Supposons que la hauteur de vos données va être x . Votre conteneur est relatif et votre 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.

Le HTML sera comme ceci

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

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

Exemple concret ici

J'espère que cela vous aidera.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X