底部固定 div 被 android 键盘向上推答案

【问题标题】：Bottom Fixed div getting pushed up with android keyboard底部固定 div 被 android 键盘向上推
【发布时间】：2019-10-02 07:01:25
【问题描述】：

我在底部有一个固定的 div，但在响应视图中，在 android 中，它会被键盘向上推。

const ContactBackgroundImage = styled.div`
  color: white
  padding: 50px
  height: 118px
  position: fixed
  bottom: 0
  left: 0
  right: 2px
  text-align: left
  background-position: top
  background-repeat: no-repeat
  background-image: url('/Images/background.png');
  @media (max-width: 480px) {
    background-position: left top
  }
`;

然后我的 div 正在渲染这个。

<ContactBackgroundImage/>

当应用程序在 android 手机中处于响应模式时，键盘会将 div 向上推。我希望 div 留在 kayboard 的底部

【问题讨论】：

手机和键盘就是这样工作的。
@NikolaLukic 位置：固定；
@cloned 所以你说没有办法解决它？但在 ios 中它工作得很好。固定的 div 隐藏在 kayboard 后面
这是网页吧？
@Examath 是的。它是一个在 react.js 中构建的网络应用程序。我只是想在移动中查看它，只有在 android 中，div 才会被推到顶部

标签： html css reactjs

【解决方案1】：

// 想要添加评论但没有足够的声誉，所以我会发布它作为答案并删除如果它是错误的。

您是否尝试过为您的 div 设置 z-index？也许它与android键盘在同一层，因此被推送。

【讨论】：

我的意思是。设置索引与此无关。键盘将整个 div 向上推..
其实我想到了你说的z-index这件事。我试图给我的表单 div z-index: 100 和 ContactBackgroundImage div z-index: -1.. 它可以工作，但我的 ContactBackgroundImage 中的链接不再有效。如果我给 -1 zindex，我的 ContactBackgroundImage div 只会放在表单 div 的后面
你能发一下它的截图吗？
在上方添加图片

【解决方案2】：

前段时间我遇到了同样的问题，而不是使用position:fixed 使用position:absolute 或position:relative 并尝试top:100% 与职位。

const ContactBackgroundImage = styled.div'
  color: white
  padding: 50px
  height: 118px
  position: absolute
  bottom:0
  left: 0
  right: 2px
  text-align: left
  background-position: top
  background-repeat: no-repeat
  background-image: url('/Images/background.png');
  @media (max-width: 480px) {
    background-position: left top
  }
`;

【讨论】：

还是一样 :( 在安卓手机中键盘向上推
所以，我已经解决了这个问题。使用position: fixed，我所做的是，当 div 的高度小于 480px 时（意味着当键盘在屏幕上时）我给出了 -1 z-index: -1 的 div 索引，它只是隐藏在上面的 div 后面
position:fixed 会移动，你可以试试绝对位置吗？