强制滚动条到底部jquery/css

Question

我已经创建了一个聊天室，其元素是li。我希望它始终坚持到底。当聊天的数量是10-20时，它可以正常工作，但之后会中途停止。我觉得有什么不对的高度，但我想不出它在这里是我的html：

<div id="chat-main"> 
    <ul id="chat-list"> 
    //I dynamically add <li>s using ajax 
    </ul> 
</div> 
<div id="message-panel"> 
    <form class="form-inline" id="messageForm"> 
    <input id="message-value" type="text" autocomplete="off" maxlength="510" placeholder="Type your message..."> 
    </form> 
</div> 

这里是我的CSS：

#chat-main { 
    height: 84%; 
    border: 2px solid #d8d7cf; 
} 

#chat-list { 
    height: 100%; 
    overflow-y: scroll; 
} 

#chat-main>ul { 
    padding-left: 10px; 
    list-style-type: none; 
} 

这是用于滚动jQuery代码：

$("#chat-list").animate({ scrollTop: $(document).height() }, "slow") 

我真的被卡住了，不知道什么是错的。

编辑：这里是我的jsfiddle对不起，我插了很多聊天的对象，所以你可以看看会发生什么：

http://jsfiddle.net/L8msx/19/

Answer 1

使用文件的高度似乎不符合逻辑的，这将让聊天的确切溢出：

http://jsfiddle.net/1yLzkgw8/

var chat = $("#chat-list"), 
overflow = chat[0].scrollHeight-chat.height(); 

chat.animate({scrollTop: overflow}, 'slow'); 

当得到scrollHeight时，使用普通的JS，因此DOM节点本身通过[0]进行检索。