聊天界面布局

总的有三部分

• 头部
• 聊天内容
• 输入框

布局如下

    <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把它拉回来

但是这时候会有一个明显的滑动过程，特别是头部。

如图