css position:absolute, bottom:0 with parent overflow:auto

Question

This is a chat room, there is a div .words as container, and a .content div inside it.

I want the text display from bottom of .content, so I use position:absolute, bottom:0; on .content. but I want it show scroll bar if .content grow higher than .words. So I add overflow:auto on .words.

if I remove bottom:0, overflow:auto will work correctly. but it not works if bottom:0.

how to make the input show from bottom, and will have scrollbar when overflow?

CSS:

.tbchat-room{
    position: fixed;
    bottom:0;
    width:260px;
    border:1px solid #aaa;
    background:#fff;
}

.tbchat-room .head{
    padding: 3px 10px;
    background:#3d9ac1;
    color:#fff;
}

.tbchat-room .words{
    height:230px;
    background:#ececec;
    overflow:auto;
    position:relative;
}

.tbchat-room .words .content{
    position:absolute;
}

.tbchat-room .say{
    width:246px;
    margin:0;
    border-top: 1px solid #ccc;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding:4px 6px;
}

.pull-right{
    float:right;
}

.content{
    padding:5px 10px;
}

HTML:

<div class="tbchat-room">
    <div class="head">
        <span class="title">Chat Room</span>
        <a class="room-close-button pull-right">&times;</a>
    </div>
    <div class="words">
        <div class="content">
            <div>sample text</div>
            <div>sample text</div>
        </div>
    </div>
    <input class="say" type="text"/>
</div>

http://jsfiddle.net/s8jD5/

Answer 1

Try to keep overflow-y:auto and run this jQuery statement each time when a new chat message is added to the box

$('.words').scrollTop($('.words')[0].scrollHeight);

You will always be at bottom

Answer 2

You can give the .content div a max-height and set the overflow to that div instead of the .words div like so:

CSS

.tbchat-room .words .content{
    position:absolute;
    bottom:0;
    overflow:auto;
    width: 100%;
    box-sizing: border-box;
    max-height: 230px;
}

Updated Fiddle

Edit:

You should also add the following code to your Javascript to make sure that when adding a new message you automatically go to the bottom of the .content div(i.e. see the new message)

$('.content').scrollTop($('.content')[0].scrollHeight);