html - 从底部到顶部堆叠 Div

Question

当将 div 附加到具有固定高度的 div 时，子 div 将从上到下出现，并粘在顶部边框处。

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

我现在正尝试像这样从下到上显示它们(坚持底部边框):

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

等等......我希望你明白我的意思。

这是否可以通过 CSS 简单地实现(类似于 vertical-align: bottom)？还是我必须与 JavaScript 一起破解某些东西？

Answer 1

所有答案都错过了您问题的滚动条点。这是一个艰难的过程。如果您只需要它适用于现代浏览器和 IE 8+，您可以使用表格定位、vertical-align:bottom 和 max-height。参见 MDN用于特定的浏览器兼容性。

Demo (垂直对齐)

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

---

除此之外，我认为仅使用 CSS 是不可能的。您可以使用 position:absolute 使元素粘在其容器的底部，但这会使它们脱离流程。因此，它们不会拉伸(stretch)并使容器可滚动。

Demo (绝对位置)

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