Divs von unten nach oben stapeln

139

Wenn Sie divs an a divmit einer festen Höhe anhängen , werden die untergeordneten Divs von oben nach unten angezeigt und bleiben am oberen Rand hängen.

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

Ich versuche jetzt, sie wie folgt von unten nach oben anzuzeigen (am unteren Rand bleiben):

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

Und so weiter ... Ich hoffe du verstehst was ich meine.

Ist das einfach mit CSS machbar vertical-align: bottom? Oder muss ich etwas zusammen mit JavaScript hacken?

Wulf
quelle

Antworten:

46

Alle Antworten verfehlen den Bildlaufleistenpunkt Ihrer Frage. Und es ist eine schwierige Frage. Wenn Sie dies nur für moderne Browser und IE 8+ benötigen, können Sie die Tabellenpositionierung vertical-align:bottomund verwenden max-height. Informationen zur spezifischen Browserkompatibilität finden Sie unter MDN .

Demo (vertikal ausrichten)

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

Abgesehen davon denke ich, dass dies nicht nur mit CSS möglich ist. Sie können Elemente mit am Boden ihres Behälters kleben lassen position:absolute, aber es wird sie aus dem Fluss nehmen. Infolgedessen dehnen sie sich nicht und machen den Container scrollbar.

Demo (position-absolut)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}
gblazex
quelle
und overflow-y:autofür den Container
Venimus
@venimus - Es wird eine deaktivierte Bildlaufleiste angezeigt, da die Höhe des Containers von einem untergeordneten Element nicht beeinflusst wird position:absolute.
Gblazex
Nun,
Ich habe die Antwort aktualisiert. Sie können das Problem mit der Bildlaufleiste in modernen Browsern (IE 7+) umgehen.
Gblazex
1
Vielen Dank für Ihre Antwort, der Wrapper macht den Job gut.
Wulf
38

Eine modernere Antwort darauf wäre die Verwendung flexbox.

Wie bei vielen anderen modernen Funktionen funktionieren sie in älteren Browsern nicht. Wenn Sie also nicht bereit sind, die Unterstützung für Browser aus der IE8-9-Ära aufzugeben, müssen Sie nach einer anderen Methode suchen.

So geht's:

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

.child {
  /* whatever */
}

Und das ist alles was du brauchst. Weitere Informationen flexboxfinden Sie unter MDN .

Hier ist ein Beispiel dafür mit einigen grundlegenden Stilen: http://codepen.io/Mest/pen/Gnbfk

Nils Kaspersson
quelle
Super Antwort, vielen Dank! Ich habe noch nichts von Flexboxen gehört, klingt wirklich interessant!
Wulf
4
Dies kehrt die Reihenfolge um, zieht sie jedoch nicht an den unteren Rand des übergeordneten Elements.
Edward Anderson
@nilbus würdest du gerne näher darauf eingehen? Meine vorherigen Tests und sogar das beigefügte Beispiel scheinen das übergeordnete Element mit Sicherheit nach unten zu ziehen.
Nils Kaspersson
Scheint, ich irre mich. Vielleicht gibt es einen widersprüchlichen Stil, der mich davon abgehalten hat, für mich zu arbeiten. Vielen Dank!
Edward Anderson
Ich habe im Beispielcode festgestellt, dass es .parent {position: fixed;} gibt, mit denen dies funktioniert. Außerdem funktioniert das Scrollen in der Demo auf Chome nicht. Sie benötigen Folgendes: .parant {-webkit-flex: 1 1 auto; Überlauf-y: auto; min-height: 0px;} und entfernen Sie die feste Position
Ng Sek Long
1

Wir können einfach die CSS-Transformation verwenden, um dies zu archivieren.

Ich habe einen Codepen dafür erstellt. https://codepen.io/king-dev/pen/PoPgXEg

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

Die Idee ist, die Wurzel zuerst horizontal und dann die direkten untergeordneten Divs erneut umzudrehen.

HINWEIS: Die obige Methode kehrt auch die Reihenfolge der Divs um. Wenn Sie sie einfach so platzieren möchten, dass sie von unten beginnen, können Sie Folgendes tun.

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

Keepin 'it oldskool ...

Ich wollte dasselbe in einem #header Div machen, also habe ich ein leeres Div namens erstellt #headspaceund es oben auf den Stapel gelegt (innerhalb von #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 -->

Dann habe ich einen Prozentsatz für die Höhe des unsichtbaren #headspace Div verwendet , um die anderen nach unten zu drücken. Es ist einfach, die Entwickler- / Inspektor-Tools des Browsers zu verwenden, um dies genau richtig zu machen.

#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
quelle
Dies funktioniert nur, wenn Sie feste Inhalte haben. Wenn Sie dynamischen Inhalt haben und nicht wissen, wer viele Divs gerendert wird, funktioniert dies nicht.
Sajid Ali
Es war nur eine kleine Lösung, die ich verwendet hatte. Die Notwendigkeit dynamischer Inhalte wurde nicht ausdrücklich erwähnt. Soweit ich weiß, wird die Seite jedes Mal, wenn eine divangehängt wird, vollständig aktualisiert . Ich setze dies hier ein, falls jemand tatsächlich eine statischere Lösung wünscht. Mit anderen Worten: Ich denke, dass eine Nullabstimmung angemessener wäre als eine negative Abstimmung.
veganaiZe
Vielen Dank, dass Sie sich die Zeit genommen und eine Antwort mit statischem Inhalt gegeben haben. Ich respektiere das. Die Frage zeigt deutlich den dynamischen Inhalt, Child Div #bei dem die Anzahl der untergeordneten Divs zunimmt, und bei einer Erhöhung um eine bestimmte Höhe sollte ein Bildlauf angezeigt werden. Diese Antwort bietet also keine Lösung für die eigentliche Frage.
Sajid Ali
0

Ich möchte, dass dies mit Bootstarp wie einer Chat-App funktioniert, bei der der Nachrichtenfluss von unten nach oben erfolgt

Nachdem ich etwas gelesen hatte, fand ich das

Ich habe eine äußere Div angenommen Klasse .outerDiv und dann UI, Liste

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

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Kuldeep Chopra
quelle
-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
quelle