浮到底部并保持滚动条

Question

我制作了一个消息传递系统，我坚持使用CSS。我想从页面底部开始显示消息（比如在Facebook上）。我使用了常用的方法，设置容器的相对位置和子位置的绝对位置，但是我也需要子项中的滚动条，当我按照我解释的方式定位消息时，滚动条消失。

这是我的代码：http://jsfiddle.net/dL3d7/

如果您从CSS中删除.messages类，您会看到滚动条，但邮件不会在底部。

所以我的问题是，如何将消息保持在底部并保留滚动条？

Answer 1

将max-height: 200px和overflow: auto设置为.messages类：

.messages{
    position: absolute;
    bottom: 0;
    max-height: 200px;/*Add this*/
    overflow:auto;/*Add this*/
    min-width:100px;/*Add this*/
}

fiddle

Answer 2

在.messages div中，您使用的是position: absolute，这意味着您必须明确width和height（就像您为{ {1}}已经在height div）

试试这个CSS：

.messagesWrap

在这里演示：http://jsfiddle.net/dL3d7/13/

Answer 3

在position: relative

中试试.messages

Updated fiddle.