Apilar Divs de abajo hacia arriba

Al agregar divs a a divcon una altura fija, los divisores secundarios aparecerán de arriba a abajo, pegándose en el borde superior.

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

Ahora estoy tratando de mostrarlos de abajo hacia arriba de esta manera (pegado al borde inferior):

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

Y así sucesivamente ... espero que entiendas lo que quiero decir.

¿Es esto simplemente factible con CSS (algo así como vertical-align: bottom)? ¿O tengo que hackear algo junto con JavaScript?

Todas las respuestas pierden el punto de la barra de desplazamiento de su pregunta. Y es difícil. Si solo necesita que esto funcione para navegadores modernos e IE 8+, puede usar el posicionamiento de la tabla, vertical-align:bottomy max-height. Consulte MDN para conocer la compatibilidad específica del navegador.

Demostración (alineación 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>  

Aparte de eso, creo que no es posible solo con CSS. Puede hacer que los elementos se adhieran al fondo de su contenedor position:absolute, pero los sacará del flujo. Como resultado, no se estirarán y harán que el contenedor sea desplazable.

Demostración (posición absoluta)

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

Una respuesta más moderna a esto sería usar flexbox.

Al igual que con muchas otras características modernas, no funcionarán en navegadores heredados , por lo que a menos que esté listo para abandonar el soporte para navegadores de la era IE8-9, deberá buscar otro método.

Así es como se hace:

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

.child {
  /* whatever */
}

Y eso es todo lo que necesitas. Para más información sobre flexbox, ver MDN .

Aquí hay un ejemplo de esto con un estilo básico: http://codepen.io/Mest/pen/Gnbfk

Simplemente podemos usar CSS transform para archivar esto.

Creé un codepen para ello. https://codepen.io/king-dev/pen/PoPgXEg

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

La idea es voltear la raíz primero horizontalmente y luego voltear divs directos de nuevo.

NOTA: el método anterior también invierte el orden de divs. Si simplemente desea colocarlos para comenzar desde abajo, puede hacer lo siguiente.

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

Manteniéndolo viejo, viejo ...

Quería hacer lo mismo en un #header div, así que creé un div vacío llamado #headspacey lo coloqué en la parte superior de la pila (dentro de #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 -->

Luego usé un porcentaje , para la altura del #headspace div invisible , para empujar a los demás hacia abajo. Es fácil usar las herramientas de desarrollador / inspector del navegador para hacer esto correctamente.

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

Quiero que esto funcione con bootstarp como una aplicación de chat donde el mensaje fluye de abajo hacia arriba

después de leer cosas, encontré esto

Tengo un div externo asumir clase .outerDiv y luego UI, lista

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

Esto es simple cuando lo usas 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>