Question

我的网站上有一个聊天应用程序页面。主容器在移动设备上占据全高和宽度。容器中包含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中执行此操作，因为我没有使用任何库？

Answer 1

您需要将CSS属性position更改为fixed。这样，它实际上是“固定的”＃34;它也不能通过屏幕改变大小来移动。

另一种方法是简单地将其对准屏幕的顶部。应该这样做是为了将尖端元素保持在顶部，中间位于中间......

页面向上滚动虚拟键盘在iphone中的存在

1 个答案: