Javascript Chat-Text nach unten

Question

Ich habe ein Chat-System mit Javascript erstellt. Die gesendeten Nachrichten sind auf der rechten Seite, die empfangenen auf der linken Seite.
Jetzt möchte ich sie auf der Unterseite anzeigen (derzeit sind sie auf der Oberseite). Aber wenn ich das Eltern-Div auf den unteren Bereich setze, werden sowohl gesendete als auch empfangene Nachrichten auf einer Seite angezeigt.

css: Screenshot, weil diese Seite kann meine CSS nicht formatiert 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

Seine getan, ändere ich die Position des "Chat-Ausgang" zu absolut und die wichtige Punkt ist, links und rechts auf 0 zu setzen.