Menumpuk Div ​​dari Bawah ke Atas

Saat menambahkan divs ke a divdengan ketinggian tetap, div turunan akan muncul dari atas ke bawah, menempel di batas atas.

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

Saya sekarang mencoba menampilkannya dari bawah ke atas seperti ini (menempel di tepi bawah):

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

Dan seterusnya ... Saya harap Anda mengerti maksud saya.

Apakah ini dapat dilakukan dengan CSS (seperti vertical-align: bottom)? Atau apakah saya harus meretas sesuatu bersama-sama dengan JavaScript?

Semua jawaban melewatkan titik scrollbar pertanyaan Anda. Dan itu yang sulit. Jika Anda hanya membutuhkan ini untuk bekerja pada browser modern dan IE 8+, Anda dapat menggunakan pemosisian tabel, vertical-align:bottomdan max-height. Lihat MDN untuk kompatibilitas browser tertentu.

Demo (rata vertikal)

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

Selain itu, menurut saya tidak mungkin hanya dengan CSS. Anda dapat membuat elemen menempel di bagian bawah wadahnya position:absolute, tetapi itu akan membuatnya keluar dari aliran. Akibatnya, mereka tidak akan meregang dan membuat penampung dapat di-scroll.

Demo (posisi-absolut)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Jawaban yang lebih modern untuk ini adalah dengan menggunakan flexbox.

Seperti banyak fitur modern lainnya, fitur ini tidak akan berfungsi di browser lama , jadi kecuali Anda siap untuk meninggalkan dukungan untuk browser dari era IE8-9, Anda perlu mencari metode lain.

Begini caranya:

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

.child {
  /* whatever */
}

Dan hanya itu yang Anda butuhkan. Untuk bacaan lebih lanjut flexbox, lihat MDN .

Berikut ini contohnya dengan beberapa gaya dasar: http://codepen.io/Mest/pen/Gnbfk

Kita cukup menggunakan transformasi CSS untuk mengarsipkan ini.

Saya membuat codepen untuk itu. https://codepen.io/king-dev/pen/PoPgXEg

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

Idenya adalah membalik root terlebih dahulu secara horizontal dan kemudian membalik div turunan langsung lagi.

CATATAN: metode di atas juga membalik urutan div. Jika Anda hanya ingin menempatkannya mulai dari bawah, Anda dapat melakukan hal berikut.

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

Keepin 'itu oldskool ...

Saya ingin melakukan hal yang sama di #header div jadi saya membuat div kosong yang disebut #headspacedan meletakkannya di atas tumpukan (di dalam #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 -->

Lalu saya menggunakan persentase , untuk ketinggian #headspace div tak terlihat , untuk mendorong yang lain ke bawah. Sangat mudah menggunakan alat pengembang / inspektur di browser untuk melakukannya dengan benar.

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

Saya ingin ini bekerja dengan bootstarp seperti aplikasi chatting di mana pesan mengalir dari bawah ke atas

setelah membaca sesuatu, saya menemukan ini

saya memiliki div luar menganggap kelas .outerDiv dan kemudian UI, daftar

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

Ini sederhana saat Anda menggunakan 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>