Jquery 在div的底部写一段

我正在尝试构建类似聊天的东西，我希望用户在文本区域内输入的内容将显示在特定div的底部，以及他上方的旧消息

我试过一些东西，但没有成功

#chatlog {
    display: table-cell;
    vertical-align: bottom;
    border: 1px solid #f00;
    max-height: 500px;
    table-layout: fixed;
    overflow-y: scroll;
    background-color: #00FFFF;
    width: 1400px;
    height: 500px;
}

这是html代码：

<div class="chat-log-wrapper">
    <div id="chatlog"></div>
</div>

<div class="input-text">
    <div class="area">
        <textarea rows="2" type="text" id="message_input">
        </textarea>
        <button id="send-message">send</button>
    </div>
</div>

发送

javascript（接收来自其他客户端的消息并将其追加）：

socketio.on（“发送给客户端的消息”，函数（数据）{
$（'#chatlog'）。追加（“”+数据[“消息”]+”
”）
});

---

似乎display:table cell正在破坏溢出的y。您可以通过在

包装器上设置
display:table cell
和
width
而不是当前的
div来实现这一点：

.chat-log-wrapper{
    display:table-cell;
    width:1400px;
}

#chatlog {
    //display: table-cell;
    vertical-align: bottom;
    border: 1px solid #f00;
    //max-height: 500px;
    table-layout: fixed;
    overflow-y: scroll;
    background-color: #00FFFF;
    width: 100%;
    height: 100px;
}

小提琴：

您还可以看看
display:flex和
弯曲方向：柱反向


教程中的更多信息：

在W3C：（最新的草稿？
您尝试了什么，为什么不起作用？>我尝试了上面的代码，但是div继续增长，滚动条没有激活，这只是CSS。你的HTML和Javascript在哪里？请检查这个答案谢谢@hex4949，我在搜索中没有找到，很抱歉。正在工作：）
.chat-log-wrapper{
    display:table-cell;
    width:1400px;
}

#chatlog {
    //display: table-cell;
    vertical-align: bottom;
    border: 1px solid #f00;
    //max-height: 500px;
    table-layout: fixed;
    overflow-y: scroll;
    background-color: #00FFFF;
    width: 100%;
    height: 100px;
}