web-dev-qa-db-fra.com

100vh de hauteur lorsque la barre d'adresse est affichée - Chrome Mobile

J'ai rencontré ce problème plusieurs fois et je me demandais s'il y avait une solution à ce problème. Mon problème se produit sur l'application mobile Chrome. Là, vous pouvez faire défiler un peu et la barre d'adresse disparaît. Jusqu'à présent, tout va bien, faisons un exemple:
Les conteneurs height sont définis sur 100vh.

How it looks with the address bar

Comme vous pouvez le voir, la partie inférieure est coupée.

Lorsque je fais défiler vers le bas, cela ressemble à ceci:

enter image description here

Maintenant ça a l'air bien. Alors évidemment Chrome calcule la hauteur des barres d'adresse dans la hauteur de la fenêtre d'affichage. Donc ma question est:

Existe-t-il un moyen pour que cela se ressemble avec ou sans la barre d'adresse? Alors que le conteneur se dilate ou quelque chose?

htmlcssgoogle-chromeaddress-barmobile-chrome
12
Tobias Glaus

Essayez d'utiliser min-height: -webkit-fill-available. Vous pouvez également l'ajouter ci-dessous height: 100vh comme solution de rechange.

1
cnotethegr8

vous pouvez résoudre le problème de la barre d'adresse avec la définition de la hauteur: 100% sur html et la balise body et la marge définie et le rembourrage du corps à zéro et vous pouvez également gérer le défilement dans votre div principal pour un meilleur contrôle

1
Babak Zarrinbal

J'ai trouvé une bonne solution ...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-Android & {
      min-height: calc(100vh - 56px);
    }
  }
}

Extrait de ici

0
Domenik Reitzner