从底部到顶部堆叠Div

时间:2011-06-19 10:35:29

标签: html css scrollbar vertical-alignment alignment

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一起破解某些东西?

7 个答案:

答案 0 :(得分:44)

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

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

Demo (位置绝对)

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

答案 1 :(得分:34)

更现代的答案是使用flexbox

与许多其他现代功能they won't work in legacy browsers一样,所以除非您准备放弃对IE8-9时代的浏览器的支持,否则您需要寻找其他方法。

以下是它的完成方式:

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

.child {
  /* whatever */
}

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

以下是一个基本样式的示例:http://codepen.io/Mest/pen/Gnbfk

答案 2 :(得分: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;
}

答案 3 :(得分: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;
}

enter image description here

enter image description here

答案 4 :(得分:-1)

坚持让&#39;它是oldskool ......

我想在#header div 中执行同样的操作,因此我创建了一个名为#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... */
}

答案 5 :(得分:-3)

使用position: absolute时很简单。

http://jsfiddle.net/XHeZj/

答案 6 :(得分:-4)

<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>