強制滾動條到底部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]進行檢索。