div滚动条自动在最底部出现

前两天做了一个功能，页面上的聊天功能，里面有遇到聊天内容在div中显示，每次都需要手动看最新的记录，在网上找例子，发现好多都是不符合的，明明搜div下拉框，结果搜到的都是body下拉框。搜了好久。才发现一个和我需求一样的，文中使用的是

.message-box{
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;//竖直方向有滚动条，如果想要横向的，可以把y改为x
}

js实现

 var div = document.getElementById('message-box');
  div.scrollTop = div.scrollHeight;

如果想用jquery实现，可以这么写

 $('#message-box')[0].scrollTop =$('#message-box')[0].scrollHeight;

一开始在菜鸟编程中在线使用，发现可以，但是用到项目上去，结果发现不行，很忧伤，是什么地方写错了呢。

后来才发现了问题，div中增加的内容必须要在div中增加，在div中的子div或ul中增加是不行的。

正确html代码

<div id="message-box" class="message-box">

</div>

原文地址：http://www.superl.org/post-JSsxdivysdgdtdzdgdddb.html