從下到上的堆棧div

Question

我正在創建一個聊天應用程序，需要按照Skype的方式從下到上排列來自用戶的消息。

發現一個解決方案here, 但它有一些缺陷。

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 demo