Stacking Divs dal basso verso l'alto

Quando si aggiunge divs ad una divcon un'altezza fissa, i div del bambino appariranno dall'alto verso il basso, aderendo al bordo superiore.

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

Ora sto cercando di visualizzarli dal basso verso l'alto in questo modo (aderendo al bordo inferiore):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ 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           │▼│
└───────────────────────┴─┘

E così via ... Spero che tu capisca cosa intendo.

È semplicemente fattibile con i CSS (qualcosa del genere vertical-align: bottom)? O devo hackerare qualcosa insieme a JavaScript?

Tutte le risposte mancano il punto della barra di scorrimento della domanda. Ed è difficile. Se hai solo bisogno di questo per funzionare con i browser moderni e IE 8+, puoi utilizzare il posizionamento delle tabelle vertical-align:bottome max-height. Vedi MDN per la compatibilità specifica del browser.

Demo (allineamento verticale)

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

A parte questo, penso che non sia possibile solo con CSS. Puoi fare in modo che gli elementi si attacchino al fondo del loro contenitore position:absolute, ma li elimineranno dal flusso. Di conseguenza non si allungano e rendono il contenitore scorrevole.

Demo (posizione assoluta)

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

Una risposta più moderna a questo sarebbe usare flexbox.

Come con molte altre funzionalità moderne, non funzioneranno nei browser legacy , quindi a meno che tu non sia pronto a abbandonare il supporto per i browser dell'era IE8-9, dovrai cercare un altro metodo.

Ecco come è fatto:

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

.child {
  /* whatever */
}

E questo è tutto ciò di cui hai bisogno. Per ulteriori approfondimenti flexbox, consultare MDN .

Ecco un esempio di questo con alcuni stili di base: http://codepen.io/Mest/pen/Gnbfk

Possiamo semplicemente usare la trasformazione CSS per archiviarlo.

Ho creato un codice per questo. https://codepen.io/king-dev/pen/PoPgXEg

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

L'idea è di capovolgere la radice prima in orizzontale e poi di capovolgere di nuovo i tuffi diretti dei bambini.

NOTA: il metodo sopra riportato inverte anche l'ordine dei div. Se si desidera semplicemente posizionarli per iniziare dal basso, è possibile effettuare le seguenti operazioni.

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

Keepin 'it oldskool ...

Volevo fare la stessa cosa in un #header div, quindi ho creato un div vuoto chiamato #headspacee l'ho posizionato in cima allo stack (all'interno di #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 -->

Quindi ho usato una percentuale , per l'altezza del #headspace div invisibile , per spingere gli altri verso il basso. È facile utilizzare gli strumenti sviluppatore / ispettore del browser per farlo nel modo giusto.

#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... */
}

Voglio questo lavoro con bootstarp come l'app di chat in cui il flusso di messaggi va dal basso verso l'alto

dopo aver letto cose, ho trovato questo

ho un div esterno assumere classe .outerDiv e poi UI, elenco

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

Questo è semplice quando lo usi position: absolute .

http://jsfiddle.net/XHeZj/

<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>