Apilar Divs de abajo hacia arriba


139

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?

Respuestas:


46

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

y overflow-y:autopara el contenedor
venimus

@venimus: mostraría una barra de desplazamiento deshabilitada, porque la altura del contenedor no se ve afectada por un position:absoluteniño.
gblazex

bueno, su solución no muestra barras de desplazamiento, lo cual es parte de la pregunta
venimus

He actualizado la respuesta. Puede solucionar el problema de la barra de desplazamiento en los navegadores modernos (IE 7+).
gblazex

1
Gracias por su respuesta, el contenedor funciona bien.
Wulf

38

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


Impresionante respuesta, muchas gracias! Todavía no he oído hablar de flexboxes, ¡suena realmente interesante!
Wulf

44
Esto invierte el orden pero no los arrastra hacia la parte inferior del padre.
Edward Anderson

@nilbus, ¿te gustaría elaborar? Mis pruebas anteriores e incluso el ejemplo adjunto ciertamente parecen tirar hacia abajo hasta la parte inferior del elemento padre.
Nils Kaspersson

Parece que estoy equivocado. Tal vez hay un estilo conflictivo que me impedía funcionar. ¡Gracias!
Edward Anderson

Encontré en el código de ejemplo, hay .parent {position: fixed;} que hace que esto funcione. Además, el desplazamiento en la demostración no funciona en Chome, necesita estos: .parant {-webkit-flex: 1 1 auto; desbordamiento-y: auto; min-height: 0px;} y eliminar la posición fija
Ng Sek Long

1

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

0

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

Esto solo funcionará si tienes contenido fijo. Si tiene contenido dinámico y no sabe a quién se representarán muchos divs, esto no funcionará.
Sajid Ali

Era solo una pequeña solución que había usado. No se mencionó específicamente la necesidad de contenido dinámico, por lo que sé, la página se actualiza completamente cada vez que divse agrega un. Así que puse esto aquí en caso de que alguien realmente quiera una solución más estática. En otras palabras: creo que un voto cero sería más apropiado que un voto negativo.
veganaiZe

Gracias por tomarse el tiempo y proporcionar una respuesta con contenido estático. Respeto eso. La pregunta muestra claramente el contenido dinámico, Child Div #donde las divisiones secundarias están aumentando, y cuando se incrementa en una cierta altura, debe mostrarse un desplazamiento. entonces esta respuesta no proporciona una solución a la pregunta real.
Sajid Ali

0

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

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí



-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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.