我正在构建一个聊天应用程序,需要将消息锚定到消息索引的底部并长大,而不是从消息索引的顶部挂起。我在react中构建它,因此以下代码实际上是JSX。

消息索引:

        <div className="chat-message-index">
         {this.state.activeChannel.messages.map(function(message{
           return <Message key={message.sid} message={message} />;
            })}
        </div>


消息(在索引内呈现):

<div className="chat-message">
  <b className="name">{this.state.author}</b><br/>
  <span dangerouslySetInnerHTML={{__html: this.state.message.body}} />
</div>


CSS:

.chat-message-index {
  height: calc(~"100vh - 250px");
  position: absolute;
  overflow-y: scroll;
  width: 100%;
  background-color: silver;
  display: list-item;
}

.chat-message {
  position:relative;
  padding:10px;
  margin:22px 45px 22px 20px;
  color:#fff;
  background:#43464b;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#aeb5ba), to(#43464b));
  background:-moz-linear-gradient(#aeb5ba, #43464b);
  background:-o-linear-gradient(#aeb5ba, #43464b);
  background:linear-gradient(#aeb5ba, #43464b);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}


我尝试了我能想到的所有CSS技巧,通过Googling以及在此处找到的每个想法,但是我什么都找不到。我得到的最接近的是在消息索引和消息上都使用transform:rotate(180deg);,但是这会反转滚动并使滚动条出现在索引的左侧,这是行不通的。我可能可以使这种方法有效,但是感觉很棘手,我的直觉是,这会在以后引起头痛。

有人知道如何简单地反转<div>的锚点吗?我想要的是第一条消息显示在消息索引<div>的底部,然后每条附加消息堆叠在之前的<div>的顶部。

最佳答案

Flexbox可以做到这一点:



.chatbox {
  margin: 1em auto;
  width: 150px;
  height: 500px;
  border: 1px solid grey;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  text-align: center;
}
.message {
  background: lightgreen;
  margin-bottom: .25em;
  padding: .25em 0 0 0;
  border-bottom: 2px solid green;
}

<div class="chatbox">
  <div class="message">MESSAGE 1</div>
  <div class="message">MESSAGE 2</div>
  <div class="message">MESSAGE 3</div>
  <div class="message">MESSAGE 4</div>
  <div class="message">MESSAGE 5</div>
  <div class="message">MESSAGE 6</div>
  <div class="message">MESSAGE 7</div>
  <div class="message">MESSAGE 8</div>
  <div class="message">MESSAGE 9</div>
  <div class="message">MESSAGE 10</div>
  <div class="message">MESSAGE 11</div>
  <div class="message">MESSAGE 12</div>
</div>

09-17 20:55
查看更多