自动填充弹出菜单

Question

对于手机设备，我将菜单固定在屏幕底部。 position: fixed;

此div中的input具有自动填充功能。在桌面上，这是下拉列表

<div style="postition:fixed; bottom:0;">
<div style="position:relative;">
<input type="text">
<div style="position:absolute; bottom:0; left:0;">
autocomplete list
</div>
</div>
</div>

我想在上面的输入中显示此自动填充功能。当然它适用于bottom:100%

但是当我打开虚拟键盘并一直使用它时，它会在键盘和“正确位置”下“跳过”。

任何提示如何设置固定在移动屏幕底部的块的自动完成列表。

这个组件由reactJS渲染可能很重要。

当我输入在虚拟键盘下跳过的任何字母时，正确位置为https://d26dzxoao6i3hh.cloudfront.net/items/2I2v1B3d0k3i2O0o122F/%5B7f0b55f5b92f3d66db3ce4d2f544fa2f%5D_Image%25202017-10-27%2520at%25202.54.03%2520PM.png?v=595301e1。

提前感谢任何提示。