Titre réécrit comme suit : La valeur 100vh de CSS3 n'est pas corrigée dans les navigateurs mobiles

Question

J'ai un problème très étrange... J'obtiens ce comportement dans chaque navigateur et version mobile que je rencontre :

• Lorsqu'une page se charge, tous les navigateurs disposent d'un menu supérieur (affichant par exemple la barre d'adresse) qui glisse vers le haut lorsque vous commencez à faire défiler. ≪/li>
• Parfois, 100vh n'est calculé que sur la partie visible de la fenêtre d'affichage. Ainsi, lorsque la barre du navigateur glisse vers le haut, 100vh augmente (en pixels)
• Toutes les mises en page seront redessinées et redimensionnées car les dimensions ont changé
• Pas bon pour l'expérience utilisateur

Comment éviter ce problème ? Quand j'ai entendu parler pour la première fois de la hauteur de la fenêtre d'affichage, j'étais enthousiasmé, j'ai pensé que je pourrais l'utiliser au lieu d'utiliser JavaScript pour définir une hauteur fixe pour les blocs, mais maintenant je pense que le seul moyen est d'utiliser JavaScript et certains événements de redimensionnement...< /p>

Vous pouvez voir le problème ici : Exemple de site

Quelqu'un peut-il m'aider à résoudre ce problème/fournir une solution CSS ?

Code de test simple :

/* Peut-être que je peux savoir quand le problème survient... */
$(fonction(){
  var redimensionné = -1 ;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})</pré>
<pre class="brush:css;toolbar:false;">*{ margin:0;

/*
  C'est une boîte qui doit rester à la même hauteur...
  Utilisez min-height pour permettre au contenu de dépasser la hauteur de la fenêtre s'il y a trop de texte
*/
.vhbox{
  hauteur min : 100 vh ;
  position : relative ;
}

.vhbox .t{
  affichage:tableau;
  position : relative ;
  largeur : 100 % ;
  hauteur : 100vh ;
}

.vhbox .c{
  hauteur : 100 % ;
  display:table-cellule;
  alignement vertical : milieu ;
  texte-align:centre;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  La hauteur de ce div doit être 100 % de la fenêtre d'affichage et conserver cette hauteur lors du défilement de la page
    <br>
    <!-- Si l'événement de redimensionnement est déclenché, cette zone de saisie sera mise en surbrillance -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  La hauteur de ce div doit être 100 % de la fenêtre d'affichage et conserver cette hauteur lors du défilement de la page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

Vous pouvez essayer d'utiliser min-height: -webkit-fill-available;而不是100vh dans votre CSS. Cela devrait faire l'affaire

Answer 2

Malheureusement, c'est intentionnel...

Il s'agit d'un problème bien connu (du moins dans Safari mobile) et intentionnel car il évite d'autres problèmes. Benjamin Poulain a répondu à un bug du webkit :

Nicolas Hoizey a fait pas mal de recherches à ce sujet : https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document- dans -some-mobile-browsers.html

Aucun correctif prévu

Actuellement, vous ne pouvez pas faire grand-chose à part éviter d'utiliser la hauteur de la fenêtre sur les appareils mobiles. Chrome a également changé en 2016 :

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing