堆叠从底部到顶部 [英] Stacking Divs from Bottom to Top

问题描述

当将 div 附加到具有固定高度的 div 时，子div将从上到下显示，贴在顶部边框。

when appending divs to a div with a fixed height, the child divs will appear from top to bottom, sticking at the top border.

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

我现在尝试从底部到顶部显示它们（粘贴到底部边框）：

I'm now trying to display them from bottom to top like this (sticking to the bottom border):

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ 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           │▼│
└───────────────────────┴─┘

等等...我希望你能得到什么我是说。

And so on... I hope you get what I mean.

这是简单的可以用css（像vertical-align：bottom？）或者我必须与javascript一起黑客吗？

Is this simply doable with css (something like vertical-align: bottom?) or do I have to hack something together with javascript?

非常感谢您的帮助。 ：）

Thank you very much for your help. :)

推荐答案

所有答案都错过了您的问题的滚动条。这是一个艰难的。如果你只需要这个工作在现代浏览器和IE 8+可以使用表定位， vertical-align：bottom 和 max-height 。有关特定浏览器的兼容性，请参见 MDN 。

All the answers miss the scrollbar point of your question. And it's a tough one. If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom and max-height. See MDN for specific browser compatibility.

演示 （vertical-align）

.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 将元素粘贴到它们容器的底部，但它会把它们从流中移出。因此，他们不会伸展并使容器可滚动。

---

Other than that, I think it's not possible with CSS only. You can make elements stick to the bottom of their container with position:absolute, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.

演示 （position-absolute）

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

这篇关于堆叠从底部到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！