圖片影響聊天內(nèi)容滾到最底部，請問怎么解決？

<div id="List" style="height: 200px;overflow-y: scroll">
    <ul id="chat-list" class="m-chat-list p-chat-list">
        <li class="u-msg item-me session-chat">
            <div idclient="cdb11992c7d2bfa1adfa8950f3fc5e9d" time="1529476888002" flow="out" type="file" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><a  target="_blank"><i class="u-icon icon-file"></i>SAAS平臺開發(fā)計劃 (1).xlsx</a></span> <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 15:56 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="6c515051c0acfe5dd87b36932c7467f0" time="1529481377228" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>lalal</div> <div id="6c515051c0acfe5dd87b36932c7467f0"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="e7ac26afc38afd08ea8a8d8d0e200b96" time="1529481479525" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>dfadsfas</div> <div id="e7ac26afc38afd08ea8a8d8d0e200b96"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="cc3f28109507cb8e107e03dc6dfd18ff" time="1529481511642" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>adfasdfa</div> <div id="cc3f28109507cb8e107e03dc6dfd18ff"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 16:53 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="3a7f635b911f0b1d6cb2621f99dd8544" time="1529484819555" flow="out" type="image" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text">
                     <!--<img src="https://nim.nosdn.127.net/NDMxNDk0Ng==/bmltYV8xOTUzNjU2NzgyXzE1Mjk0ODQ4MTkwMTBfMzc5N2Q4MGQtOGVmNS00NWZjLTgyZjctYWUzN2Y0NzIzNzAz?imageView&amp;thumbnail=180x0&amp;quality=85">-->
                    <div>文字替換圖片</div>
                </span>
                <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 17:47 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="ed0ed204daa0a87c6cb078182096742b" time="1529488079948" flow="out" type="image" style="overflow: hidden; text-align: left;"><a class="msg-head">
                <span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image">
                <img src="../../../../static/img/avatar/unknown.png">
                </span></a>
                <span class="msg-text">
                    <div>最底部</div>
                </span>
                <!---->
            </div>
        </li>
    </ul>
    <div id="bottom" style="height: 10px"></div>
</div>
<script>
document.getElementById('bottom').scrollIntoView()
//    $(function () {
//        $("#List").scrollTop(999999)
////        $("#List").scrollTop($("#List").scrollHeight)
////        $("#List").scrollTop($("#List")[0].scrollHeight)
//    })
//    document.getElementById('List').scrollTop = 999999
<?script>

有圖片的時候沒法滾動到最底部

把圖片替換掉就能到達最底部

上面script里的都試過了，問題都是一樣，請問有大神知道怎么解決嗎？