Empilhamento de divs de baixo para cima

139

Ao anexar divs a a divcom uma altura fixa, os divs filhos aparecerão de cima para baixo, colando na borda superior.

┌─────────────────────────┐
 Child Div 1             
 Child Div 2             
                         
                         
                         
└─────────────────────────┘

Agora estou tentando exibi-los de baixo para cima assim (colando na borda 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           │▼│
└───────────────────────┴─┘

E assim por diante ... Espero que você entenda o que quero dizer.

Isso é simplesmente possível com CSS (algo como vertical-align: bottom)? Ou tenho que hackear algo junto com JavaScript?

Wulf
fonte

Respostas:

46

Todas as respostas não atendem ao ponto da barra de rolagem da sua pergunta. E é difícil. Se você precisar apenas trabalhar com navegadores modernos e no IE 8+, poderá usar o posicionamento da tabela vertical-align:bottome max-height. Consulte MDN para compatibilidade específica do navegador.

Demonstração (alinhamento 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>  

Fora isso, acho que não é possível apenas com CSS. Você pode fazer com que os elementos grudem no fundo do contêiner position:absolute, mas isso os tira do fluxo. Como resultado, eles não esticam e tornam o contêiner rolável.

Demonstração (posição absoluta)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}
gblazex
fonte
e overflow-y:autopara o contêiner
venimus 19/06/11
@venimus - exibiria uma barra de rolagem desativada, porque a altura do contêiner não é afetada por uma position:absolutecriança.
gblazex
bem a sua solução não apresenta quaisquer barras de rolagem, que é parte da pergunta
venimus
Eu atualizei a resposta. Você pode solucionar o problema da barra de rolagem nos navegadores modernos (IE 7+).
gblazex
1
Obrigado pela sua resposta, o invólucro faz o trabalho bem.
Wulf
38

Uma resposta mais moderna para isso seria usar flexbox.

Como em muitos outros recursos modernos, eles não funcionam em navegadores herdados . Portanto, a menos que você esteja pronto para abandonar o suporte a navegadores da era IE8-9, precisará procurar outro método.

Veja como é feito:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

E é tudo o que você precisa. Para mais informações flexbox, consulte MDN .

Aqui está um exemplo disso com alguns estilos básicos: http://codepen.io/Mest/pen/Gnbfk

Nils Kaspersson
fonte
Resposta incrível, muito obrigado! Ainda não ouviu falar de caixas flexíveis, parece realmente interessante!
Wulf
4
Isso inverte a ordem, mas não a puxa para a parte inferior do pai.
Edward Anderson
@ nilbus você gostaria de elaborar? Meus testes anteriores e até mesmo o exemplo anexo certamente parecem puxar a parte inferior do elemento pai.
Nils Kaspersson
Parece que estou enganado. Talvez haja um estilo conflitante que o impedisse de funcionar para mim. Obrigado!
Edward Anderson
Eu encontrei no código de exemplo, há .parent {position: fixed;} que faz isso funcionar. Além disso, a rolagem na demonstração não funciona no Chome, você precisa dos seguintes itens: .parant {-webkit-flex: 1 1 auto; estouro-y: automático; min-height: 0px;} e remova a posição fixa
Ng Sek Long
1

Podemos simplesmente usar a transformação CSS para arquivar isso.

Eu criei um codepen para ele. https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

A idéia é inverter a raiz primeiro horizontalmente e depois inverter filhos diretos divs novamente.

NOTA: o método acima também inverte a ordem das divs. Se você simplesmente deseja colocá-los para começar de baixo, faça o seguinte.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}
Dan Robert
fonte
0

Mantendo o velho estilo ...

Eu queria fazer a mesma coisa em uma #header div, então criei uma div vazia chamada #headspacee coloquei no topo da pilha (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 -->

Então eu usei uma porcentagem , para a altura do #headspace div invisível , para empurrar os outros para baixo. É fácil usar as ferramentas de desenvolvedor / inspetor do navegador para fazer isso da maneira certa.

#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... */
}
veganaiZe
fonte
Isso só funcionará se você tiver conteúdo fixo. se você tiver conteúdo dinâmico e não souber quem renderizará muitas divs, isso não funcionará.
precisa
Era apenas uma pequena solução que eu tinha usado. Não houve menção específica à necessidade de conteúdo dinâmico - pelo que sei, a página é completamente atualizada toda vez que um divé anexado. Então, eu coloquei isso aqui caso alguém realmente queira uma solução mais estática. Em outras palavras: acho que um voto zero seria mais apropriado do que um voto negativo.
veganaiZe
Obrigado por reservar um tempo e fornecer uma resposta com conteúdo estático. Eu respeito isso. A pergunta mostra claramente o conteúdo dinâmico, Child Div #onde os divs filhos estão aumentando e, quando aumentados em uma certa altura, deve haver uma rolagem exibida. portanto, essa resposta não fornece solução para a pergunta real.
Sajid Ali
0

Eu quero este trabalho com bootstarp como aplicativo de bate-papo onde a mensagem flui de baixo para cima

depois de ler coisas, achei isso

Eu tenho uma div externa assumir classe .outerDiv e, em seguida, interface do usuário, lista

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

insira a descrição da imagem aqui

insira a descrição da imagem aqui

kuldeep chopra
fonte
-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>
Matt Healy
fonte