想知道如何定位列表以使最后一项始终最先可见,我已将列表定位为 absolute: bottom
但不确定如何使内容可滚动,任何人都可以提供任何建议?有没有办法用 flex box 做到这一点?我的问题是内容滚动,我必须在 div.chat__inner
上设置 height: 100%
,这会立即将列表跳到顶部。
CSS
.chat {
position: relative;
height: 200px;
width: 200px;
border: 1px solid #000;
overflow: hidden;
}
.chat__inner {
position: absolute;
bottom: 0;
}
.messages {
overflow: auto;
-webkit-user-select: none;
-webkit-overflow-scrolling: touch;
height: 100%;
margin: auto;
}
最佳答案
只需将 width: 100%
和 height: 100%
添加到您的消息容器中:
.chat__inner {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
}
还有一些来自 here 的 javascript (jquery) :
var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);
var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);
.chat {
position: relative;
height: 200px;
width: 200px;
border: 1px solid #000;
overflow: hidden;
}
.chat__inner {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
}
.messages {
overflow: auto;
-webkit-user-select: none;
-webkit-overflow-scrolling: touch;
height: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat">
<div class="chat__inner">
<div class="messages">
<p>Message 1</p>
<p>Message 2</p>
<p>Message 3</p>
<p>Message 4</p>
<p>Message 5</p>
<p>Message 6</p>
<p>Message 7</p>
<p>Message 8</p>
<p>Message 9</p>
<p>Message 10</p>
</div>
</div>
</div>
关于CSS 将列表定位到底部,以便最后一个列表项可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38661502/