从底部到顶部堆叠Div

Question

将divs 附加到div具有固定高度的a时,子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

演示 (垂直对齐)

.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,但它会将它们从流中取出.因此,它们不会拉伸并使容器可滚动.

演示 (位置 - 绝对)

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

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