Question

我的网站上有一个聊天应用程序页面。主容器在移动设备上占据全高和宽度。容器中有position: fixed，其中有3个部分有position:absolute。最后一个div #app-msg-composer有一个textarea，并在其中发送button，就像其他聊天应用程序一样。以下是css：

#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%;
}

这在Android设备中运行良好，但在iPhone中，只要打开虚拟键盘输入消息，屏幕的一半就会向上滚动到视口之外。此外#app-msg-composer在正确的位置可见，但是当我检查它（在iPhone中）时，它与底部（虚拟键盘后面）对齐，因此我无法点击发送按钮。然后，当我滚动页面时，一切都会到达它的位置。只有在iPhone中启用虚拟键盘时才会出现这些问题。

总结一下，position:absolute个元素中的position: fixed元素相对于浏览器窗口}和top 而不是虚拟键盘时的父元素很活跃。

我尝试了一些来自stackoverflow的解决方案，但没有用。如何在javascript或css中执行此操作，因为我没有使用任何库？

绝对元素在iphone中存在虚拟键盘的位置

0 个答案: