Divs von unten nach oben stapeln

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?

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

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

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

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

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

Dies ist einfach, wenn Sie verwenden position: absolute.

http://jsfiddle.net/XHeZj/

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