Jquery聊天框 - 显示DIV底部的第一条消息

Question

我有一个发送和接收消息的聊天DIV。

目前消息从DIV的顶部开始并向下处理DIV（以红色显示），当它们到达底部时，它们会被Jquery向上推，如下所示：

.scrollTop(activeConversationsDIV[0].scrollHeight);

我想询问是否有方法在DIV底部启动消息？这对用户来说更有意义，因为他们会看到他们在键入的位置附近键入的内容。

有没有办法从DIV底部启动消息流向上工作？

三江源

Answer 1

您可以使用display: table，display: table-cell和vertical-align: bottom。

以下是一个例子：

http://jsfiddle.net/ktpRK/

CSS

#chat {
    display: table;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

.chatMessage {
    display: table-cell;
    vertical-align: bottom;
}

HTML

<div id="chat">
<div class="chatMessage">
    <p>test</p>
    <p>test 2</p>
</div>
</div>

Answer 2

以下是定位

的示例

HTML

<div id="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

CSS

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}

JQuery的

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

jsfiddle with scroll

jsfiddle without scroll