将滚动条强制到底部jquery / css

Question

I have created a chatroom which elements are li . I want it to always stick to the bottom. It works fine when number of chats are like 10-20 but after that it stops halfway. I think there is something wrong with the height but I can't figure it out here is my 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>

Here is my 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;
}

And this is the jquery code for scrolling:

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

I'm really stuck and don't know what is wrong.

Edit: here is my jsfiddle sorry for the chat objects I inserted alot so you can see what happens :

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

Answer 1

Using document height doesn't seem logical, this will get the exact overflow of the chat :

http://jsfiddle.net/1yLzkgw8/

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

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

When getting scrollHeight , plain JS is used so the DOM node itself is retrieved with [0] .