Empilage des divisions de bas en haut

Question

Lorsque vous ajoutez divs à un div avec une hauteur fixe, les divs enfants apparaissent de haut en bas, collant à la bordure supérieure.

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

J'essaie maintenant de les afficher de bas en haut comme ceci (en collant à la bordure inférieure):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

Et ainsi de suite ... J'espère que vous comprenez ce que je veux dire.

Est-ce simplement faisable avec CSS (quelque chose comme vertical-align: bottom)? Ou dois-je pirater quelque chose avec JavaScript?

Answer 1

Toutes les réponses manquent le point de la barre de défilement de votre question. Et c'est difficile. Si vous n'en avez besoin que pour les navigateurs modernes et IE 8+, vous pouvez utiliser le positionnement de la table, vertical-align:bottom et max-height. Voir MDN pour la compatibilité spécifique du navigateur.

Démo (alignement vertical)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

---

En dehors de cela, je pense que ce n'est pas possible avec CSS uniquement. Vous pouvez faire coller des éléments au fond de leur conteneur avec position:absolute, mais ça les sortira du flux. En conséquence, ils ne s'étireront pas et ne feront pas défiler le conteneur.

Démo (position absolue)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Answer 2

Une réponse plus moderne à cela serait d'utiliser flexbox.

Comme pour de nombreuses autres fonctionnalités modernes, elles ne fonctionneront pas dans les navigateurs hérités , donc à moins que vous ne soyez prêt à abandonner la prise en charge des navigateurs de l'ère IE8-9, vous devrez chercher une autre méthode.

Voici comment procéder:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

Et c'est tout ce dont vous avez besoin. Pour plus d'informations sur flexbox, voir MDN .

Voici un exemple de cela avec un style de base: http://codepen.io/Mest/pen/Gnbfk