Divisions fixes en bas qui remontent avec le clavier Android

Question

J'ai un div fixe en bas, mais en vue réponse, dans Android, il est poussé vers le haut avec le clavier.

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
  }
`;

Et puis mon div rend ceci.

<ContactBackgroundImage/>

Lorsque l'application est en mode réactif sur un téléphone Android, le clavier pousse la division vers le haut. Je veux que la division reste en bas du tableau de bord.

Answer 1

// J'ai voulu ajouter un commentaire mais je n'ai pas assez de réputation, donc je vais le poster comme réponse et le supprimer si c'est faux.

Avez-vous essayé de définir un z-index pour votre div ? Peut-être qu'elle se trouve sur la même couche que le clavier Android et qu'elle est donc poussée.

Answer 2

J'ai rencontré le même problème il y a quelques temps, plutôt que d'utiliser position:fixed utiliser position:absolute o position:relative et essayez également top:100% avec des positions.

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
  }
`;