从下到上堆叠Div


139

divs 附加到div具有固定高度的a时,子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一起破解?

Answers:


46

所有答案都错过了问题的滚动点。这是一个艰难的过程。如果您只需要将此功能用于现代浏览器和IE 8+,则可以使用表定位vertical-align:bottommax-height。有关特定的浏览器兼容性,请参见MDN

演示 (垂直对齐)

.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,但是它将使它们脱离流程。结果,它们将不会拉伸并使容器可滚动。

演示 (绝对位置)

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

overflow-y:auto用于容器
venimus 2011年

@venimus-它会显示一个禁用的滚动条,因为容器的高度不受position:absolute孩子的影响。
gblazex 2011年

好,您的解决方案不会显示任何滚动条,这是问题的一部分
venimus 2011年

我已经更新了答案。您可以解决现代浏览器(IE 7+)中的滚动条问题。
gblazex 2011年

1
感谢您的回答,包装器做得很好。
Wulf

38

一个更现代的答案是使用flexbox

与许多其他现代功能一样,它们将无法在旧版浏览器中使用,因此,除非您准备放弃对IE8-9时代的浏览器的支持,否则您将需要寻找另一种方法。

这是完成的过程:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

这就是您所需要的。有关进一步的阅读flexbox,请参见MDN

这是带有一些基本样式的示例:http : //codepen.io/Mest/pen/Gnbfk


很棒的答案,非常感谢!还没听说flexbox,听起来真的很有趣!
Wulf

4
这将颠倒顺序,但不会将其拉低到父级的底部。
爱德华·安德森

@nilbus您想详细说明吗?我以前的测试,甚至是所附的示例,似乎都可以肯定地将其拉到了父元素的底部。
Nils Kaspersson 2014年

似乎我弄错了。也许有一种冲突的风格使它无法为我工作。谢谢!
爱德华·安德森(

我在示例代码中发现,有.parent {position:fixed;}使之有效。同样,演示中的滚动不适用于Chome,您需要以下这些:.parant {-webkit-flex:1 1 auto; 溢出-y:自动; min-height:0px;}并移除固定位置
Ng Sek Long

1

我们可以简单地使用CSS转换将其存档。

我为此创建了一个代码笔。 https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

想法是先水平翻转根,然后再翻转直接子div。

注意:上述方法还颠倒了div的顺序。如果只想从底部开始放置它们,则可以执行以下操作。

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

0

保持旧时状态...

我想在#header div中做同样的事情,所以我创建了一个名为的空div#headspace并将其放在堆栈的顶部()内#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的高度)将其他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... */
}

仅在内容固定的情况下才有效。如果您具有动态内容,并且不知道将渲染多少个div,则此方法将无效。
萨吉德·阿里

这只是我使用的一个小解决方案。没有具体提及动态内容的必要性,因为我知道每次div添加a时页面都会完全刷新。所以我把它放在这里,以防有人真的想要一个更静态的解决方案。换句话说:我认为票票比否定票票更合适。
veganaiZe

感谢您抽出宝贵时间并提供包含静态内容的答案。我尊重。该问题清楚地显示了动态内容,Child Div #其中子div不断增加,当增加一定高度时,应该显示滚动条。因此,此答案不能解决实际问题。
萨吉德·阿里

0

我想要与bootstarp一起使用,例如聊天应用程序,其中消息流从下到上

看完东西,我发现了这个

我有一个外部div假定类.outerDiv然后是UI,列表

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

在此处输入图片说明

在此处输入图片说明



-5
<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.