css - 从下到上堆叠 div

Question

我正在创建一个聊天应用程序，需要按照 Skype 中的方式从下到上排列来自用户的消息。

找到解决方案here ,但它有几个缺陷。

1. 容器的高度是固定高度，我需要覆盖窗口的所有可用高度(如果我使用 height: 100%，它会完全收缩)。
2. 消息项的高度是固定的，我需要调整到它的内容高度。

由于 CSS 体验不佳，我在解决这两个问题时遇到了麻烦。有人可以指出解决方案吗？

Answer 1

如果您提供自己的 jsfiddle，这可能会更容易。但无论如何，我试图通过@IlyaStreltsyn jsbin 来回答你的问题。

您可以定位到固定并设置垂直对齐底部并从底部应用间隙。这里我用0px来演示。

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
}

jsfiddle demo