CSS 将列表定位到底部，以便最后一个列表项可见

Question

想知道如何定位列表以使最后一项始终最先可见，我已将列表定位为 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;
}

fiddle http://jsfiddle.net/kyllle/jf2rvzag/

Answer 1

只需将 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>