【发布时间】：2018-02-23 06:05:44
【问题描述】：
我的网站上有一个聊天应用程序页面。主容器在移动设备上采用全高和全宽。容器有position: fixed，3 个divs 里面有position:absolute。最后一个 div #app-msg-composer 有一个 textarea 并像其他聊天应用程序一样在其中发送 button。以下是简要代码：
<div id='app-container'>
<div id='app-header'></div>
<div id='app-body'></div>
<div id='app-msg-composer'>
<textarea></textarea>
<button>Send</button>
</div>
</div>
#app-container{
position: fixed;
height:100%;
width:100%;
top: 0px;
bottom:0px;
}
#app-header{
position:absolute;
height:48px;
width:100%;
top:0px;
}
#app-body{
position:absolute;
top:48px;
bottom: 74px;
width:100%;
}
#app-msg-composer{
position:absolute;
bottom:0px;
height:74px;
width:100%;
}
当textarea 被点击并获得焦点时，虚拟键盘的存在使页面的上半部分向上滚动（超出视口）。 这个问题与 iPhone 有关只是因为它在其他 android 设备上运行良好。我搜索了这个问题，发现这是iphone中的一个常见问题，因为：
在 iPhone 上，虚拟键盘的存在不会改变视口高度。
我尝试了一些来自 stackoverflow 的解决方案，但没有奏效。如果我没有使用任何库，如何仅在 javascript 或 css 中执行此操作？
【问题讨论】：
-
没有 html 标记的 CSS 没有帮助，如果可能的话，提供一些项目链接，或者任何 jsfiddle 或代码 sn-p 在这里重新创建场景。
-
你使用了太多的定位，我看不出原因，所以请随意发布你使用的整页标记和css。
-
我也在添加 textarea 和按钮，但我主要关心的是这个标记只在 iphone 中存在虚拟键盘。
-
这么多定位的原因是这个聊天框必须像全屏弹出窗口一样打开，
position:fixed以背景为主体。如果您发现此标记有一些改进，请提出建议。 -
这是整个标记吗？然后你不需要任何定位，实际上不应该，移动设备不像我上次检查的那样喜欢固定和绝对定位，并且选定的文本框会向上移动，这样用户就可以看到他正在输入的内容，你不能防止它，你必须让你的标记适应屏幕变化。
标签： javascript css iphone mobile-safari