从底部到顶部堆叠 Div

Question

当将 div s 附加到具有固定高度的 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 破解一些东西？

原文由 Wulf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

演示 （垂直对齐）

 .wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

网页格式

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>
  </div>
</div>

---

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

演示 （绝对位置）

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

原文由 gblazex 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一个更现代的答案是使用 flexbox 。

与许多其他现代功能一样， 它们无法在旧版浏览器 中使用，因此除非您准备放弃对 IE8-9 时代浏览器的支持，否则您将需要寻找另一种方法。

这是它是如何完成的：

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

.child {
  /* whatever */
}

这就是您所需要的。有关 flexbox 的进一步阅读，请参阅 MDN 。

这是一个带有一些基本样式的示例：http: //codepen.io/Mest/pen/Gnbfk

原文由 Nils Kaspersson 发布，翻译遵循 CC BY-SA 3.0 许可协议