css in a chatbox - html

Question

I have a chat program where my target is, when someone type and send a text, i want the text to be display from the bottom. Like any other chating frame.
To do this, i have wrote the following html/css structure.
here the "li" tags are creating dynamically when someone send a text.
The problem:
The problem is if i remove the "height:100% " from the ".chatbox ul", the text in the chatbox starts from the bottom. But in that case i dont see any scroll bar. But I need to see a scroll bar.
And, if I keep the "height:100% " in the ".chatbox ul", I see a scroll bar but the text in the chatbox starts from the top.
My target is to have a scroll bar and the text should also start from the bottom.
How would I acheive this..?? any help guys??
<div class="chatBox">
<ul id="messages" class="chatText">
<li>
<div class="chatterName">maverick </div>
<div class="chatterMessage"> hi</div>
<div class="clear"></div>
</li>
<li>
<div class="chatterName">johny</div>
<div class="chatterMessage"> hello</div>
<div class="clear"></div>
</li>
</ul>
CSS:
.chatBox
{
background-image: url('../images/DefaultitemBg.gif');
font-family: Verdana;
font-size: 14px;
color: #333333;
border: 1px double #FFFFFF;
padding: 5px;
margin: 10px;
width:76%;
height:600px;
position:relative;
border: 1px solid #E9E9E9;
overflow:auto;
float:left;
}
.chatBox ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
position:absolute;
overflow:auto;
bottom:0;
height:100%;
}
.chatBox ul li
{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #F2F2F2;
margin-bottom: 0px;
}
.chatterName
{
width: 120px;
background-color: #EEEEEE;
color: #333333;
float: left;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #CCCCCC;
height: 30px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #E6E6E6;
}
.chatterMessage
{
width: 91%;
padding-left:4px;
color: #333333;
float:left;
min-height:30px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #EFEFEF;
}
.chatText
{
bottom: 0;
left: 0;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 1;
border-left-style: 0;
border-bottom-width: 1px;
border-bottom-color: #E6E6E6;
width:100%;
}
EDIT:
See it live here
If you see carefully, you will notice when i am entering text in the chatbox, from the top, previous texts are disappearing.
What I want is a scroll bar, so that users can see previous messages.

Answer 1

You can use javascript to scroll to bottom:
document.getElementById('messages').innerHTML += '<li>'+your message here+'</li>'
window.scrollTo(0, document.body.scrollHeight)

Answer 2

This should solve it:
use max-height instead of height
.chatBox ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
position:absolute;
overflow:auto;
bottom:0;
max-height: 100%;
/*height:100%;*/
}
working example: http://jsfiddle.net/pt43J/1/