Empiler les Divs de bas en haut

Question

Lorsque l'on ajoute div à un div avec une hauteur fixe, les divs enfants apparaîtront de haut en bas, en restant sur le bord supérieur.

 Child Div 1             
 Child Div 2             

J'essaie maintenant de les afficher de bas en haut comme ceci (en restant sur 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 que cela peut se faire simplement avec CSS (quelque chose comme vertical-align: bottom ) ? Ou dois-je bricoler quelque chose avec JavaScript ?

Answer 1

Toutes les réponses manquent le barre de défilement point de votre question. Et c'est une question difficile. Si vous avez seulement besoin que cela fonctionne 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é avec certains navigateurs.

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 seulement. Vous pouvez faire en sorte que les éléments restent au fond de leur conteneur avec position:absolute mais ça les empêchera de s'épanouir. Par conséquent, ils ne s'étireront pas et le conteneur ne pourra pas être défilé.

Démo (position-absolue)

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

Answer 2

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

Comme de nombreuses autres fonctionnalités modernes, ils ne fonctionneront pas dans les anciens navigateurs Par conséquent, à moins que vous ne soyez prêt à abandonner la prise en charge des navigateurs de l'ère IE8-9, vous devrez trouver 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 en savoir plus sur flexbox voir MDN .

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

Answer 3

Nous pouvons simplement utiliser la transformation CSS pour archiver cela.

J'ai créé un codepen pour cela. https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

L'idée est d'abord de retourner la racine horizontalement, puis de retourner à nouveau les divs enfants directs.

NOTE : la méthode ci-dessus inverse également l'ordre des divs. Si vous voulez simplement les placer en commençant par le bas, vous pouvez faire ce qui suit.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

Answer 4

Je veux que cela fonctionne avec bootstarp comme une application de chat où les messages circulent de bas en haut.

Après avoir lu des articles, j'ai trouvé ceci

j'ai un div externe qui assume la classe .outerDiv et ensuite l'interface utilisateur, liste

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

Answer 5

Keepin' it oldskool...

Je voulais faire la même chose dans un #header div J'ai donc créé un div appelé #headspace et l'a placé au sommet de la pile (à l'intérieur de l'élément #header ) :

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

Ensuite, j'ai utilisé un pourcentage pour la hauteur de l'invisible #headspace div pour pousser les autres vers le bas. Il est facile d'utiliser les outils de développement et d'inspection du navigateur pour obtenir un résultat optimal.

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}