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

问题描述

追加 DIV s到一个 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（类似垂直对齐：底部）？或者我必须使用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 +，你可以使用表定位，垂直对齐：底部和最大高度。请参见 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.

演示的（垂直对齐）的

.wrapper { display:table-cell; vertical-align:bottom; height:200px;  }
.content { max-height:200px; overflow:auto;  }

HTML

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

---

除此之外，我认为这是不可能的，只有CSS。你可以让元素坚持自己的容器与的底部位置：绝对，但它会带他们出去的流量。因此，他们将不会延长，使容器以可滚动

---

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.

演示的（位置绝对）的

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

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