Układanie bloków DIV od dołu do góry

139

Podczas dodawania divs do a divo stałej wysokości, podrzędne elementy DIV będą pojawiać się od góry do dołu, przyklejając się do górnej krawędzi.

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

Teraz próbuję wyświetlić je od dołu do góry w ten sposób (przyklejając się do dolnej krawędzi):

┌─────────────────────────┐
                         
                         
                         
 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           │▼│
└───────────────────────┴─┘

I tak dalej ... Mam nadzieję, że rozumiesz, o co mi chodzi.

Czy jest to po prostu wykonalne za pomocą CSS (coś w rodzaju vertical-align: bottom)? A może muszę coś zhakować razem z JavaScriptem?

Wulf
źródło

Odpowiedzi:

46

Wszystkie odpowiedzi pomijają punkt paska przewijania twojego pytania. I to jest trudne. Jeśli potrzebujesz tego tylko do pracy z nowoczesnymi przeglądarkami i IE 8+, możesz użyć pozycjonowania tabel vertical-align:bottomi max-height. Zobacz MDN, aby uzyskać informacje o zgodności z konkretnymi przeglądarkami.

Demo (wyrównanie w pionie)

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

Poza tym myślę, że nie jest to możliwe tylko w przypadku CSS. Możesz sprawić, by elementy przykleiły się do dna ich pojemnika za pomocą position:absolute, ale spowoduje to usunięcie ich z przepływu. W rezultacie nie rozciągną się i nie umożliwią przewijania kontenera.

Demo (pozycja bezwzględna)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}
gblazex
źródło
a overflow-y:autodla kontenera
Venimus
@venimus - wyświetli wyłączony pasek przewijania, ponieważ element position:absolutepodrzędny nie ma wpływu na wysokość kontenera .
gblazex
cóż, twoje rozwiązanie nie wyświetla żadnych pasków przewijania, co jest częścią pytania
venimus
Zaktualizowałem odpowiedź. Możesz obejść problem paska przewijania w nowoczesnych przeglądarkach (IE 7+).
gblazex
1
Dziękuję za odpowiedź, opakowanie dobrze sobie radzi.
Wulf
38

Bardziej nowoczesną odpowiedzią na to byłoby użycie flexbox.

Podobnie jak w przypadku wielu innych nowoczesnych funkcji, nie będą działać w starszych przeglądarkach , więc jeśli nie jesteś gotowy do rezygnacji z obsługi przeglądarek z ery IE8-9, będziesz musiał poszukać innej metody.

Oto jak to się robi:

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

.child {
  /* whatever */
}

I to wszystko, czego potrzebujesz. Więcej informacji można flexboxznaleźć w MDN .

Oto przykład tego z podstawowymi stylami: http://codepen.io/Mest/pen/Gnbfk

Nils Kaspersson
źródło
Świetna odpowiedź, bardzo dziękuję! Nie słyszałem jeszcze o flexboxach, brzmi naprawdę interesująco!
Wulf
4
To odwraca kolejność, ale nie ciągnie ich w dół do rodzica.
Edward Anderson
@nilbus, czy chciałbyś to rozwinąć? Moje poprzednie testy, a nawet załączony przykład, z całą pewnością wydają się ciągnąć w dół element nadrzędny.
Nils Kaspersky,
Wygląda na to, że się mylę. Być może istnieje konfliktowy styl, który uniemożliwia mi pracę. Dzięki!
Edward Anderson,
W przykładowym kodzie znalazłem .parent {position: fixed;}, co sprawia, że ​​to działa. Ponadto przewijanie w wersji demonstracyjnej nie działa w Chome, potrzebujesz tych: .parant {-webkit-flex: 1 1 auto; overflow-y: auto; min-height: 0px;} i usuń ustaloną pozycję
Ng Sek Long
1

Możemy po prostu użyć transformacji CSS, aby to zarchiwizować.

Stworzyłem do tego codepen. https://codepen.io/king-dev/pen/PoPgXEg

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

Chodzi o to, aby najpierw odwrócić pierwiastek w poziomie, a następnie ponownie odwrócić bezpośrednie potomne elementy div.

UWAGA: powyższa metoda również odwraca kolejność elementów div. Jeśli chcesz po prostu umieścić je na początku od dołu, możesz wykonać następujące czynności.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}
Dan Robert
źródło
0

Keepin 'it oldskool ...

Chciałem zrobić to samo w #header elemencie div, więc utworzyłem pusty element div o nazwie #headspacei umieściłem go na szczycie stosu (wewnątrz #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 -->

Następnie użyłem wartości procentowej jako wysokości niewidocznego elementu #headspace div , aby wypchnąć pozostałe w dół. Łatwo jest użyć narzędzi programisty / inspektora przeglądarki, aby zrobić to dobrze.

#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
źródło
To zadziała tylko wtedy, gdy masz stałą zawartość. Jeśli masz dynamiczną zawartość i nie wiesz, kto wiele elementów div zostanie wyrenderowanych, to nie zadziała.
Sajid Ali
To było tylko małe rozwiązanie, którego użyłem. Nie było żadnej konkretnej wzmianki o konieczności dynamicznej zawartości - z tego, co wiem, strona jest całkowicie odświeżana za każdym razem, gdy divjest dodawany. Więc umieściłem to tutaj na wypadek, gdyby ktoś faktycznie chciał bardziej statycznego rozwiązania. Innymi słowy: uważam, że głosowanie zerowe byłoby bardziej odpowiednie niż głosowanie przeciw.
veganaiZe
Dziękuję za poświęcenie czasu i udzielenie odpowiedzi o statycznej treści. Szanuję to. Pytanie wyraźnie pokazuje dynamiczną zawartość, Child Div #gdzie podrzędne elementy div rosną, a po zwiększeniu o określoną wysokość powinno zostać pokazane przewijanie. więc ta odpowiedź nie zapewnia rozwiązania rzeczywistego pytania.
Sajid Ali
0

Chcę, aby ta praca z bootstarpem była jak aplikacja do czatowania, w której wiadomości płyną od dołu do góry

po przeczytaniu rzeczy znalazłem to

Mam zewnętrzny div zakładaj klasę .outerDiv, a następnie UI, list

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

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

kuldeep chopra
źródło
-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
źródło