从底部到顶部堆叠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:bottommax-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时,这很简单。

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>