对齐<ul> </ul> </li>底部的<li>元素

Question

我创建了实时聊天框

页面底部有一个“聊天”<ul>元素栏，我在其上放了许多聊天框<li>。这些聊天框可以最小化。没什么好看的，这是很多人做的，包括脸书。

问题在于，当一个聊天框最小化而另一个聊天框没有最小化时，最小化的聊天不会粘在页面底部：它位于页面中间，与其他非最小化聊天的顶部对齐

这是一个显示问题的JsFiddle：http://jsfiddle.net/k8UTJ/1/

请有人编辑此JsFiddle以告诉我我们可以将“User2”聊天栏（最小化）对齐到页面底部吗？

由于

Answer 1

float:right中的问题是.chatBox。 Demo