Apilar Divs de Abajo hacia Arriba

Question

Apilar Divs de Abajo hacia Arriba

Cuando se añaden div s a un div con una altura fija, los divs 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 (pegándose 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?

120

css html alignment vertical-alignment scrollbar

Author: ROMANIA_engineer, 2011-06-19

Source

5 answers

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 deshacerse del 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, véase MDN.

Aquí hay un ejemplo de esto con algunos estilos básicos: http://codepen.io/Mest/pen/Gnbfk

29

Author: Nils Kaspersson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-23 08:56:14

Keepin' it oldskool...

Yo quería hacer lo mismo en un #header div {[10] } 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 -->

Entonces usé un porcentaje, por la altura de lo invisible #headspace div, para empujar a los demás hacia abajo. Es fácil usar las herramientas de desarrollador / inspector del navegador para hacerlo 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... */
}

-1

Author: veganaiZe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-21 22:54:20

Esto es simple cuando se usa position: absolute.

Http://jsfiddle.net/XHeZj /

-3

Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-19 10:41:46

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

-4

Author: Matt Healy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-19 10:47:31

score 42 · Accepted Answer

Todas las respuestas pierden el scrollbar punto de su pregunta. Y es difícil. Si solo necesita esto para funcionar con navegadores modernos e IE 8 + puede usar posicionamiento de tablas, vertical-align:bottom y max-height. Consulte MDN para conocer la compatibilidad específica del navegador.

Demo (vertical-align)

.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 con 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%;
}