从底部到顶部的叠加

当您使用 position: absolute时，这很简单。

Http://jsfiddle.net/xhezj/

所有的答案都漏掉了你问题的 滚动条点。这是个艰难的决定。如果你只需要这个为现代浏览器和 IE8 + 工作，你可以使用表定位，vertical-align:bottom和 max-height。有关特定浏览器兼容性，请参见 MDN。

演示 < em > (垂直对齐)

.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可以使元素粘附在容器的底部，但是这会使它们脱离流。因此，他们不会拉伸，使容器是可滚动的。

演示 < em > (位置-绝对值)

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

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

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

与许多其他现代特性一样，它们不能在传统浏览器中工作，所以除非你准备放弃对 IE8-9时代浏览器的支持，否则你需要寻找另一种方法。

接下来的步骤如下:

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


.child {
/* whatever */
}

这就是你所需要的全部内容。想要进一步阅读 flexbox，请参阅 MDN。

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

保持它的老式风格..。

我想在 #header Div中做同样的事情，所以我创建了一个名为 #headspace的空 Div，并把它放在堆栈的顶部(在 #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 -->

然后我用一个 百分比 ，作为不可见的 #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... */
}