如何使用 javascript 或 css 获取手机的虚拟键盘高度？答案

【问题标题】：How can I get a mobile phone’s virtual keyboard height using javascript or css?如何使用 javascript 或 css 获取手机的虚拟键盘高度？
【发布时间】：2020-08-31 09:09:10
【问题描述】：

问题：

我想在手机的虚拟键盘上方放置一个固定元素，如下图所示。我希望将div 固定在虚拟键盘上方。另外，我正在使用反应。有没有办法使用框架来解决这个问题？

Refer to this picture

我的临时解决方案：

我对@987654324@ 的bottom position 进行了硬编码，因此它位于虚拟键盘上方。但是，我希望它能够灵活响应所有不同的移动设备。我尝试在互联网上搜索答案，但没有一个对我有用。

.toolbar {
position: absolute;
bottom: 270px;
}

是否有任何可能的解决方案来帮助调整这一点？任何帮助都会很棒，我将不胜感激。

【问题讨论】：

标签： javascript html css reactjs mobile

【解决方案1】：

如果父元素的高度为 100%，则可以这样做

你可以看到这个exemple

【讨论】：

之前试过了，还是不行。感谢您的建议

【解决方案2】：

您必须使用fixed 位置并添加bottom: 0 值，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/position 像这样

position: fixed;
bottom: 0

这样你的元素就固定在视口的底部

【讨论】：

我试过固定位置，但对我仍然不起作用。谢谢你的回答。