总的有三部分
- 头部
- 聊天内容
- 输入框
布局如下
<div style="position: fixed; bottom: 0px;"></div>
<div style="position: relative; top: 0px; width: 100%; background: red">群聊1</div>
<div style="height: 450px" id="h">聊天内容</div>
<input type="text" onfocus="f()" onblur="b()">
</div>
<script>
window.f = () => {
h.scrollIntoView()
h.style.height = '200px'
}
window.b = () => {
h.style.height = '450px'
}
</script>
之所以加，scrollIntoView， 因为软键盘把内容被顶上去了（白屏），scrollIntoView把它拉回来
但是这时候会有一个明显的滑动过程，特别是头部。
如图
