css - 从下到上堆叠 div

Question

我正在创建一个聊天应用程序，需要像在 Skype 中那样从下到上对齐来自用户的消息。

在这里找到了一个解决方案，但它有几个缺陷。

1. 容器的高度是固定高度，我需要覆盖窗口的所有可用高度（如果我使用高度：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 演示