css - 在聊天框中从下到上显示div中的数据

Question

我有一条聊天消息提取数据并放入 div

ORDER BY message_id DESC LIMIT 10

数据取出 desc 并限制 10 并使用 while 循环输出所有数据。

现在数据是从上到下的。

但是我需要从下到上显示数据

因此更新消息将显示在底部。

Answer 1

你需要的是display: table;和display: table-cell;属性

div.wrap {
    display: table;
    height: 300px;
    width: 200px;
    background: #eee;
}

div.cell {
    display: table-cell;
    vertical-align: bottom;
    padding: 5px;
}

div.cell span {
    display: block;
    padding: 5px;
}

演示

Answer 2

这是我的解决方案display: flex

<div class="messages-scroller">
  <div>
    <div class="spacer"></div>
    <div class="messages">
      <div class="message">Test</div>
    </div>
  </div>
</div>

.messages-scroller {
    position: relative;
    overflow-y: auto;
}

.messages-scroller > div {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    min-height: 100%;
}

.spaser {
    flex: 1 1 auto;
}

.messages {
    flex: 0 1 auto;
}