当我在IOS上打开键盘时，为什么上面的元素会被向上推？

Question

在我的网页中，有很多内容，我需要将输入框保留在底部。然而，使用iOS Safari，当我点击输入标签打开键盘时，我的页面内容被键盘上推并离开了原来的位置。当我向下滑动页面时，我的输入框被拿走了。我希望我的输入框固定在键盘上方。这是我的例子：

.f {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
border-top: 1px #ccc solid;
z-index: 10;
background-color: #fff;
}

<div id="c">
       contents
 </div>
<div class="f">
    <input  placeholder="please"/>
</div>

let c =  document.getElementById('c')
  for (let i = 0; i < 100; i++) {
   c.innerHTML += `<p>this is ${i}+++${i}+++ line</>`
  }

我希望输入框保持在底部，无论键盘抬起还是关闭，无论页面如何滚动，无论键盘抬起与否，页面都应该固定。

我尝试了很多方法，但仍然无法达到我需要的效果。比如通过弹出键盘来监听滚动条的位置等

Answer 1

官方说法，我认为你不能。

例如，这似乎是正确的页面，但它对您没有任何帮助：

有人讨论了页面如何以某种方式运行以触发 Safari 根据需要做出反应。