replicate ios chat box try 2

HTML

<div class="chat-window">
    <div class="chat clearfix">
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
        <div class="chat-bubble them">Man this chat is so cool!</div>
        <div class="chat-bubble you">I know!</div>
        <div class="chat-bubble them">Don't you wonder what life would be like if we were all dinosaurs eating grass and stuff?</div>
        <div class="chat-bubble them">Hello?</div>
    </div>
    <div class="bottom">
        <input type="text" value="Hey!!!" />
        <input type="button" value="Send" />
    </div>
</div>

CSS

* {
    position:relative;
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-transition: bottom 0.2s ease-in-out;
    -moz-transition: bottom 0.2s ease-in-out;
    -o-transition: bottom 0.2s ease-in-out;
    transition: bottom 0.2s ease-in-out;
    font-family:"Arial";
    line-height:20px;
    font-size:14px;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* start commented backslash hack \*/
 * html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* close commented backslash hack */
.chat-window {
    width:80%;
    background:#222;
    padding:10px;
    margin:auto;
}

.chat {
    background:white;
    padding:10px;
    overflow:auto;
    height:380px;
}

.chat-bubble {
    width:auto;
    clear:both;
    padding:3px 12px;
    margin-bottom:5px;
}

.them {
    background:#eee;
    float:left;
}

.you {
    background:blue;
    float:right;
    color:white;
}

.send {
    margin-top:50px;
}

.bottom {
    padding:20px 0;
    height:80px;
}

JavaScript

textBox = $("input[type='text']");
chatBox = $(".chat");
debugger;
chatBox.scrollTop(chatBox[0].scrollHeight);

$("input[type='button']").click(function(){
   $(".chat").append('<div class="chat-bubble you send">' + textBox.val() + '</div>') ;
    
    chatBox.scrollTop(chatBox[0].clientHeight - $(".send").height());
    alert(chatBox[0].scrollHeight - $(".send").height());
});