我正在构建一个聊天应用程序,需要将消息锚定到消息索引的底部并长大,而不是从消息索引的顶部挂起。我在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>