Titre réécrit comme suit : La valeur 100vh de CSS3 n'est pas corrigée dans les navigateurs mobiles
<p>J'ai un problème très étrange... J'obtiens ce comportement dans chaque navigateur et version mobile que je rencontre : </p>
<ul>
<li>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>
<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)</li>
<li>Toutes les mises en page seront redessinées et redimensionnées car les dimensions ont changé</li>
<li>Pas bon pour l'expérience utilisateur</li>
</ul>
<p>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>
<p>Vous pouvez voir le problème ici : Exemple de site</p>
<p>Quelqu'un peut-il m'aider à résoudre ce problème/fournir une solution CSS ? </p>
<heure />
<p>Code de test simple :</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* 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></pre>
<p><br /></p>
