从底部到顶部叠放Divs

Question

将 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拼凑一下？

- Wulf

Answer 1

一个更现代的做法是使用 flexbox。

像许多其他现代特性一样，它们在旧版浏览器中不起作用，因此除非你准备放弃支持 IE8-9 时期的浏览器，否则你需要寻找另一种方法。

以下是如何操作：

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

.child {
  /* whatever */
}

这就是你所需要的。如果想进一步了解flexbox，请参考MDN。

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

- Nils Kaspersson

---

这将改变顺序，但不会把它们拉到父元素的底部。 - Edward Anderson

@nilbus，您能详细说明一下吗？我的先前测试甚至附带的示例都明确地将其拉到了父元素的底部。 - Nils Kaspersson

看起来我错了。也许有一种冲突的风格让它无法工作。谢谢! - Edward Anderson

是的，这根本不起作用。column-reverse只是反转子元素显示的顺序，这甚至不是想要的。在这个例子中，子元素之所以在底部，仅仅是因为“基本样式”中有bottom: 1em;。 - xehpuk

你好，你能否滚动你的解决方案？ - artSx

Answer 2

所有答案都忽略了您问题中的滚动条部分。这是一个棘手的问题。如果您只需要在现代浏览器和IE 8+上使用此功能，您可以使用表格定位、vertical-align:bottom 和 max-height。请参见MDN获取特定浏览器兼容性信息。

演示 (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使元素固定在其容器底部，但这将使它们脱离流程。结果它们不会伸展并使容器滚动。

演示 （position-absolute）

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

- gblazex

---

为容器设置 overflow-y:auto。 - venimus

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

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

我已经更新了答案。在现代浏览器（IE 7+）中，您可以解决滚动条问题。 - gblazex

谢谢您的回答，这个包装器很好地完成了工作。 - Wulf

Answer 3

我希望这个工作能够与Bootstrap一起使用，就像聊天应用程序一样，消息从底部向上流动。

在阅读相关材料后，我找到了这个：

我有一个外层div，假设它的类名为.outerDiv， 然后是用户界面UI，列表。

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

- kuldeep chopra

Answer 4

我们可以简单地使用CSS transform来实现这个效果。

我为此创建了一个CodePen。 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;
}

- Dan Robert

Answer 5

保持老派...

我想在一个 #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 -->

然后我使用了一个百分比，用于不可见的#headspacediv的高度，以将其他元素向下推。使用浏览器的开发者/检查工具很容易调整到最佳状态。

#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... */
}

- veganaiZe

---

只有在您有固定内容的情况下，此方法才有效。如果您有动态内容并且不知道将呈现多少个div，则此方法将无法正常工作。 - Sajid Ali

这只是我使用过的一个小解决方案。没有特别提到需要动态内容 - 我所知道的是每次附加div时页面完全刷新。因此，我在这里放置这个解决方案，以防有人真正想要一个更静态的解决方案。换句话说：我认为零票比负票更合适。 - veganaiZe

感谢您抽出时间提供静态内容的答案，我非常尊重这一点。 问题明确显示动态内容，“Child Div＃”其中子div逐渐增加，当高度增加到一定程度时，应该显示滚动条。因此，这个答案并没有提供实际问题的解决方案。 - Sajid Ali

Answer 6

CSS

display:table-cell 不起作用，如果包装器是弹性项目，可能具有流体高度（例如在我的情况下）。这就是为什么我支持 flexbox 方法的原因。然而，如果你想进一步发挥这个想法，节省一行代码，你也可以利用网格并编写如下内容：

.big-wrapper {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: auto;
  height: 0;
  display: grid; <!-- the important part -->
  align-content: end; <!-- the important part -->
}

.content {
  overflow-y: auto;
}

HTML

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

- Marcin

Answer 7

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

http://jsfiddle.net/XHeZj/

- Chris

Answer 8

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

- Matt Healy