html - attribute - Apilando divisiones de abajo hacia arriba

title label html

Question

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?

Answer 1

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

Answer 2

Esto es simple cuando usa position: absolute .

http://jsfiddle.net/XHeZj/

Answer 3

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.

Demo (vertical-alinear)

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

Demo (posición absoluta)

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

Answer 4

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

Answer 5

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