iPhone Web 应用程序输入字段在一个位置：绝对容器

Question

我为 iPhone 创建了一个群聊，它几乎完美无缺。它通过定位各种元素来使用完整的视口：

#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}

这使它看起来像这样：

但是当键盘弹出时，一切都发生了变化，下面出现了一个灰色区域：

那个灰色区域的高度是状态栏的高度和调试控制台的高度一起（没有调试控制台只是状态栏的高度）。

为什么会插入这个灰色区域，我该如何避免呢？

Answer 1

#message-input:focus {
margin-bottom: -XXXpx;
}

其中 XXX = 问题灰色区域的高度。可以快速解决它...