从底部到顶部堆叠Div
将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一起黑客攻击？
所有的答案错过了你的问题的滚动条点。 这是一个艰难的。 如果你只需要这个为现代浏览器和IE 8 +工作，你可以使用表定位， vertical-align:bottom和max-height 。 请参阅MDN以了解特定的浏览器兼容
演示 （垂直alignment）
.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 ，但它会把他们从stream中。 因此，他们不会伸展，使容器可以滚动。
演示 （位置绝对）
.wrapper { position: relative; height: 200px; } .content { position: absolute; bottom: 0; width: 100%; }
更现代的答案是使用flexbox 。
对于flexbox支持在flexbox 并不是很好 ，所以除非你准备好支持IE8和IE9，否则你需要寻找另一种方法。
这是如何完成的：
.parent { display: flex; flex-direction: column-reverse; } .child { /* whatever */ }
这就是你所需要的。 有关flexbox ，请参阅MDN或CSS-tricks上的这篇文章 。
下面是一些基本样式的例子： http : //codepen.io/Mest/pen/Gnbfk
保持它旧的…
我想在#header div中做同样的事情，所以我创build了一个名为#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... */ }
当你使用position: absolute时，这很简单。
<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>
