css - float 到底部并保持滚动条

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