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>