本文介绍了堆叠从底部到顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当将 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 。有关特定浏览器的兼容性,请参见。

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%;
}

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

09-17 10:37