从下到上堆叠 div

所有答案都错过了您问题的滚动条点。这是一个艰难的过程。如果您只需要它适用于现代浏览器和 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 使元素粘在其容器的底部，但这会使它们脱离流程。因此，它们不会拉伸并使容器可滚动。

Demo （绝对位置）

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

---

更现代的答案是使用 flexbox。

与许多其他现代功能一样，they won't work in legacy browsers，因此除非您准备放弃对 IE8-9 时代浏览器的支持，否则您将需要寻找另一种方法。

这是如何完成的：

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

.child {
  /* whatever */
}

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

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

---

我们可以简单地使用 CSS 转换来归档它。

我为它创建了一个codepen。 https://codepen.io/king-dev/pen/PoPgXEg

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

这个想法是先水平翻转根，然后再次翻转直接子 div。

注意：上述方法也颠倒了 div 的顺序。如果您只是想将它们从底部开始，您可以执行以下操作。

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

---

我希望与 bootstarp 一起工作，例如消息流自下而上的聊天应用程序

读完东西后，我发现了这个

我有一个外部 div 假设类 .outerDiv 然后是 UI ，列表

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

https://i.stack.imgur.com/GHhkg.png

https://i.stack.imgur.com/MlPe5.png

---

保持它oldskool...

我想在 #header div 中做同样的事情，所以我创建了一个名为 #headspace 的空 div 并将它放在堆栈顶部（在 {1 }):

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

然后我使用 percentage 来表示不可见 #headspace div 的高度，以将其他人向下推。使用浏览器的开发人员/检查器工具很容易做到这一点。

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

---

display: table-cell 如果包装器是 flex 项目，可能具有可变高度（如我的情况），则不起作用。这就是为什么我赞成使用 flexbox 方法。不过，如果你想更进一步，节省一行代码，你也可以利用网格并编写如下内容：

CSS

.big-wrapper {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: auto;
  height: 0;
  display: grid; <!-- the important part -->
  align-content: end; <!-- the important part -->
}

.content {
  overflow-y: auto;
}

HTML

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

---

当您使用 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>

---