Using css to achieve chat window, how to make the window slide to the latest one?

implement a conversation window with css. The problem is that constantly sending messages the latest messages exceed the fixed height. Is there any way to automatically slide up the latest news, similar to Wechat"s chat window

    <div class="warp">
        <div class="content"></div>
    </div>

warp is my window box height fixed; content is the content box height as the content expands, warp sets overflow:auto but the height of content exceeds warp can not display the last message. I keep changing the translateY value of content to scroll, but there is a drawback: the content is not fully displayed, because translate only translates the content, not the box. Is there a big boss? is there a solution? Thank you very much

Dec.22,2021

Let's get to know this:

Element.scrollIntoView ()-Web API API | MDN
https://developer.mozilla.org.


Scroll to the end

function scrollToEnd(id){
  var el = document.getElementById(id);
  el.scrollTop=el.scrollHeight;
}

scrollToEnd('warp')//warp id

read more documents
https://developers.weixin.qq.

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31f2e-2bdcb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31f2e-2bdcb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?