从下到上堆叠 div

Posted 2023-02-21

【中文标题】从下到上堆叠 div

【英文标题】：Stacking Divs from Bottom to Top

【发布时间】：2011-09-18 02:45:40

【问题描述】：

将divs 附加到具有固定高度的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 破解一些东西？

【参考方案1】：

我希望这项工作与 bootstarp 一起使用，例如消息流自下而上的聊天应用程序

读完之后发现了这个

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

.outerDiv 
    height: 361px;
    position: relative;

ui.msg-content
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;

【参考方案2】：

我们可以简单地使用 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】：

更现代的答案是使用flexbox。

与许多其他现代功能一样，@​​987654321@，因此除非您准备放弃对 IE8-9 时代浏览器的支持，否则您将需要寻找另一种方法。

这是如何完成的：

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


.child 
  /* whatever */

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

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

【讨论】：

很棒的答案，非常感谢！还没听说过 flexbox，听起来很有趣！

这会颠倒顺序，但不会将它们拉到父级的底部。

@nilbus 您愿意详细说明吗？我之前的测试，甚至是附加的示例，似乎都将下拉到父元素的底部。

看来我弄错了。也许有一种相互矛盾的风格使它无法为我工作。谢谢！

你好，你可以滚动你的解决方案吗？

【参考方案4】：

保持它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 -->

然后我使用 percentage，作为不可见的#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... */

【讨论】：

这仅在您有固定内容时才有效。如果您有动态内容并且不知道将呈现多少个 div，这将不起作用。

这只是我使用的一个小解决方案。没有具体提到动态内容的必要性——据我所知，每次添加div 时页面都会完全刷新。所以我把它放在这里，以防有人真的想要一个更静态的解决方案。换句话说：我认为零票比反对票更合适。

感谢您抽出宝贵时间提供静态内容的答案。我尊重。问题清楚地显示了动态内容，Child Div # 子 div 正在增加，当增加一定高度时，应该显示滚动。所以这个答案不能为实际问题提供解决方案。

【参考方案5】：

所有答案都错过了您问题的滚动条点。这是一个艰难的过程。如果您只需要它适用于现代浏览器和 IE 8+，您可以使用表格定位，vertical-align:bottom 和 max-height。具体浏览器兼容性见MDN。

Demo(垂直对齐)

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

【讨论】：

和overflow-y:auto 用于容器

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

你的解决方案没有显示任何滚动条，这是问题的一部分

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

感谢您的回答，包装器做得很好。

【参考方案6】：

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

【参考方案7】：

当您使用position: absolute 时，这很简单。

http://jsfiddle.net/XHeZj/