Question

我正在尝试构建类似聊天的内容，我希望用户在文本区域内输入的内容将显示在特定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("message_to_client", function (data) {
    $('#chatlog').append("<p>"+data["message"]+"</p>")
});

似乎display：table-cell破坏了溢出-y。

Answer 1

您可以通过在display:table-cell而不是当前width上设置wrapper和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;
}

小提琴：

http://jsfiddle.net/q7zb5Lv5/

Answer 2

您还可以查看display:flex;和flex-direction:column-reverse;。

<强> DEMO

教程中的更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

和W3C :(最新稿？）http://dev.w3.org/csswg/css-flexbox/

在div的底部写段落

2 个答案: