Javascript 移动应用程序的HTML/CSS。打开键盘时，带输入的页脚行为错误

我有一个非常棘手的问题，几个星期以来我一直在努力解决

我想为移动设备进行网络聊天。我有一些语音气泡和一个有输入框的页脚。页脚应始终位于底部。当键盘打开时，它应该刚好移动到键盘上方，用户在书写时可以看到键盘

到目前为止，这是可行的。棘手的事情是让视图中的语音气泡可以滚动，这样我就可以滚动到第一条消息，而不必移动页脚

我有一个版本只在谷歌Chrome上运行（在iOS上测试），但在Safari上不运行：

这是一个丑陋的解决方案，涉及Javascript代码等

---

你们有没有解决办法？解决方案不一定要漂亮，只需要有效。请帮助：/

使聊天窗口可滚动，并将固定位置设置为页眉和页脚输入。你可以通过设置position:fixedproperty来完成。我不需要。我需要一个JS函数来确定页面的实际可见高度（页面顶部和键盘之间）