Xếp chồng Divs từ dưới lên trên

Khi nối divs vào a divvới chiều cao cố định, các div con sẽ xuất hiện từ trên xuống dưới, dán ở viền trên cùng.

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

Bây giờ tôi đang cố gắng hiển thị chúng từ dưới lên trên như thế này (bám vào viền dưới):

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

Và như vậy ... Tôi hy vọng bạn hiểu ý tôi.

Điều này chỉ đơn giản là có thể thực hiện được với CSS (một cái gì đó như vertical-align: bottom)? Hay tôi phải hack một cái gì đó cùng với JavaScript?

Tất cả các câu trả lời bỏ lỡ điểm cuộn thanh câu hỏi của bạn. Và đó là một khó khăn. Nếu bạn chỉ cần điều này để làm việc cho các trình duyệt hiện đại và IE 8+, bạn có thể sử dụng định vị bảng vertical-align:bottomvà max-height. Xem MDN để biết khả năng tương thích trình duyệt cụ thể.

Bản trình diễn (căn dọc)

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

Ngoài ra, tôi nghĩ rằng không thể chỉ với CSS. Bạn có thể làm cho các phần tử dính vào đáy thùng chứa của chúng position:absolute, nhưng nó sẽ đưa chúng ra khỏi dòng chảy. Kết quả là họ sẽ không kéo dài và làm cho container có thể cuộn được.

Demo (vị trí tuyệt đối)

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

Một câu trả lời hiện đại hơn cho điều này sẽ được sử dụng flexbox.

Cũng như nhiều tính năng hiện đại khác, chúng sẽ không hoạt động trong các trình duyệt cũ , vì vậy trừ khi bạn sẵn sàng bỏ hỗ trợ cho các trình duyệt từ thời IE8-9, bạn sẽ cần tìm phương pháp khác.

Đây là cách nó được thực hiện:

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

.child {
  /* whatever */
}

Và đó là tất cả những gì bạn cần. Để đọc thêm flexbox, xem MDN .

Đây là một ví dụ về điều này với một số kiểu dáng cơ bản: http://codepen.io/Mest/pen/Gnbfk

Chúng ta chỉ cần sử dụng biến đổi CSS để lưu trữ này.

Tôi đã tạo ra một codepen cho nó. https://codepen.io/king-dev/pen/PoPgXEg

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

Ý tưởng là lật gốc trước theo chiều ngang và sau đó lật trực tiếp div con.

LƯU Ý: phương pháp trên cũng đảo ngược thứ tự của div. Nếu bạn chỉ đơn giản muốn đặt chúng để bắt đầu từ dưới cùng, bạn có thể làm như sau.

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

Giữ nó cũ đi ...

Tôi muốn làm điều tương tự trong một #header div vì vậy tôi đã tạo một div trống được gọi #headspacevà đặt nó lên trên cùng ngăn xếp (bên trong #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 -->

Sau đó, tôi đã sử dụng một tỷ lệ phần trăm , cho chiều cao của #headspace div vô hình , để đẩy những người khác xuống. Thật dễ dàng để sử dụng các công cụ phát triển / thanh tra của trình duyệt để làm cho điều này vừa phải.

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

tôi muốn công việc này với bootstarp như ứng dụng trò chuyện trong đó dòng thông báo từ dưới lên trên

Sau khi đọc các thứ, tôi tìm thấy điều này

tôi có một lớp div giả định bên ngoài .outerDiv và sau đó là UI, liệt kê

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

Điều này là đơn giản khi bạn sử dụng 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>