Javascript 聊天文本到底部

Question

我用 javascript 创建了一个聊天系统。发送的消息在右边，接收的在左边。
现在我想将它们显示在底部(目前它们在顶部)。但是如果我将父 div 设置在底部，那么发送和接收的消息都会显示在一侧。

css: 截图因为这个页面无法格式化我的 css wow.. https://s15.postimg.org/kav7m3x3v/css_SO.png

win.document.getElementById('input-text-chat').onkeyup = function (e) {
    if (e.keyCode != 13) return;
    // removing trailing/leading whitespace
    this.value = this.value.replace(/^\s+|\s+$/g, '');

    var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    var d = a.getSeconds();
    if (b < 10) {
        b = '0' + b;
    }
    if (c < 10) {
        c = '0' + c;
    }
    if (d < 10) {
        d = '0' + d;
    }
    var time = b + ':' + c + ':' + d;

    if (!this.value.length) return
    connection.send('<div class="chat-OutputGET bubbleGET"> <font color="white"> User(' + time + '): ' + this.value + '</font></div>');
    console.log(connection.send);
    console.log('User (' + time + '): ' + this.value);
    appendDIV('<div class="chat-OutputSEND bubble"> <font color="white"> Me (' + time + '): ' + this.value + '</font></div>');
    this.value = '';
};
var chatContainer = win.document.querySelector('.chat-output');

function appendDIV(event) {
    console.log(event);
    var div = document.createElement('div');
    div.innerHTML = event.data || event;

    chatContainer.appendChild(div);
    div.tabIndex = 0;
    div.focus();
    win.document.getElementById('input-text-chat').focus();
}
connection.onmessage = appendDIV;

}

<div id="chatHtml" style="display: none;">
    <link rel="stylesheet" href="style/main.css">
    <div id=chatOutput class="chat-output"></div>
    <textarea class="form-control" rows="1" id="input-text-chat" placeholder="Enter Text Chat"></textarea>
    <div id="chat-container">
    </div>
</div>

Answer 1

完成，我将“聊天输出”的位置更改为绝对值，重点是将左右设置为 0。