Astackndo divisiones de abajo hacia arriba

Al agregar div a un div con una altura fija, las divisiones secundarias aparecerán de arriba a abajo, pegadas 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 esto para trabajar con navegadores modernos e IE 8+, puede usar el posicionamiento de la tabla, vertical-align:bottom y max-height . Ver MDN para la compatibilidad específica del navegador.

Demostración (vertical-alinear)

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

html

 
row 1
row 2
row 3

Aparte de eso, creo que no es posible solo con CSS. Puede hacer que los elementos se peguen al fondo de su contenedor con la 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 los navegadores heredados , por lo que a menos que esté listo para abandonar el soporte para navegadores de la era IE8-9, tendrá que 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 leer más sobre flexbox , ver MDN .

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

Manteniéndolo oldskool …

Quería hacer lo mismo en un div #header así que creé un div vacío llamado #headspace y lo coloqué en la parte superior de la stack (dentro de #header ):

   

Luego utilicé un porcentaje , para la altura del #headspace invisible #headspace , para empujar a los otros hacia abajo. Es fácil usar las herramientas de desarrollador / inspector del navegador para que todo salga bien.

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

Esto es simple cuando usa position: absolute .

http://jsfiddle.net/XHeZj/

 
Child Div 1
Child Div 2
Child Div 3
Child Div 4
Child Div 5