543 votes

Nereo Costacurta avatar

CSS3 100vh non constant dans le navigateur mobile

Demandé el 9 de Mai, 2016
Quand la question a-t-elle été
64207 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un problème très étrange... dans chaque navigateur et version mobile, j'ai rencontré ce comportement :

  • tous les navigateurs ont un menu supérieur lorsque vous chargez la page (montrant la barre d'adresse par exemple) qui glisse vers le haut lorsque vous commencez à faire défiler la page.
  • 100vh parfois n'est calculée que sur la partie visible d'un viewport, donc lorsque la barre du navigateur glisse vers le haut, 100vh augmente (en termes de pixels)
  • toute la mise en page doit être repeinte et réajustée car les dimensions ont changé
  • un mauvais effet de saut pour l'expérience utilisateur

Comment éviter ce problème ? Quand j'ai entendu parler de viewport-height pour la première fois, j'étais enthousiaste et je pensais pouvoir l'utiliser pour des blocs de hauteur fixe au lieu d'utiliser javascript, mais maintenant je pense que le seul moyen de le faire est en fait javascript avec un événement de redimensionnement...

vous pouvez voir le problème à : site de prélèvement

Quelqu'un peut-il m'aider ou me suggérer une solution CSS ?

code de test simple :

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Demandé el 9 de Mai, 2016 par Nereo Costacurta

2 votes

Avatar de Gaurav Aggarwal

Si j'ai bien compris la question, le problème auquel vous êtes confronté est que dans le navigateur mobile, la hauteur est supérieure à la hauteur du viewport visible n'est-ce pas ?

Commenté el 9 de Mai, 2016 par Gaurav Aggarwal

0 votes

Avatar de C14L

Intéressant, je n'avais jamais remarqué ça avant. C'est principalement l'image d'arrière-plan qui est sensiblement instable. Et si vous ajoutiez un transition: 0.5s ou plus, pour que le changement soit moins brutal ?

Commenté el 9 de Mai, 2016 par C14L

1 votes

Avatar de Nereo Costacurta

@GauravAggarwal non, c'est exactement le contraire : la hauteur réelle du viewport est supérieure à celle fournie par le navigateur lorsque sa barre d'adresse est visible...

Commenté el 9 de Mai, 2016 par Nereo Costacurta
Afficher 5 autres commentaires

Réponses

Trop de publicités?

0voto

Trevor Wood avatar
Trevor Wood Points 883

Voici une solution que j'ai utilisée pour mon application React.

iPhone 11 Pro et iPhone Pro Max - 120px

iPhone 8 - 80px

max-height: calc(100vh - 120px);

C'est un compromis mais une solution relativement simple

Répondu el 22 de Janvier, 2020 par Trevor Wood (883 Points )

0voto

sstauross avatar
sstauross Points 357

Cet article de blog offre une bonne lecture du problème et de ses solutions possibles : Utilisation de la barre d'adresse iOS dans les mises en page 100vh

La solution que j'ai trouvée dans mon application React est d'utiliser la fonction react-div-100vh décrite dans le post ci-dessus.

Répondu el 27 de Novembre, 2020 par sstauross (357 Points )

0voto

lukyer avatar
lukyer Points 3269

Le navigateur Brave sur iOS se comporte différemment (buggé ?). Il modifie la hauteur de la fenêtre de façon dynamique en fonction de l'affichage ou de la masquage de la barre d'adresse. C'est un peu ennuyeux car il modifie la mise en page de la page en fonction des unités vw/vh.

Chrome et Safari fonctionnent bien.

Répondu el 23 de Janvier, 2021 par lukyer (3269 Points )

1 votes

Avatar de user1709076

Je pense que brave est le seul navigateur qui fonctionne correctement - l'écran se met à jour au fur et à mesure que les barres de navigation se cachent dynamiquement - quelque chose qu'apple a admis comme étant trop de travail pour safari

Commenté el 27 de Janvier, 2021 par user1709076

0 votes

Avatar de lukyer

En effet, la largeur de l'image dépend de sa hauteur, qui change de manière dynamique à cause de ces barres de navigation. Je préférerais le comportement de Chrome/Safari pour mon site.

Commenté el 28 de Janvier, 2021 par lukyer

0voto

Manishkumar Adesara avatar
Manishkumar Adesara Points 13

J'ai trouvé une solution parfaite qui fonctionne. J'étais aussi coincé avec ce problème, alors j'ai essayé de le découvrir. Lorsque vous faites défiler la page vers le haut dans l'iPhone, la barre inférieure de Safari est masquée. C'est peut-être le même problème que vous avez rencontré ?

J'ai essayé cette solution dans react.

Et si ce n'est pas ce que vous dites, une autre solution pour votre problème est de ne pas utiliser 100vh comme hauteur partout, mais plutôt 100%.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>

      body, html, root {
          height: 100vh;
          margin: 0;
          padding: 0;
      }

      .header {
          position: fixed;
          background-color: steelblue;;
          width: 100vw;
          height: 50px;
          z-index: 1;
      }

      .content {
          display: flex;
          position: absolute;
          top: 50px;
          min-height: calc(100vh - 50px);
      }

  </style>
</head>
<body>
  <div>
    <div class="header">
      Header
    </div>
    <div class="content">
      <div>
        <p>The header will stick to the top when you reach its scroll position.</p><p>Scroll back up to remove the sticky effect.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some
        text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
        eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
        repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable
        scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera
        fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum
        dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae
        gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
        definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
        voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
        eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some
        text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
        eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
        repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      </div>
    </div>
  </div>
</body>
</html>
Répondu el 4 de Juin, 2021 par Manishkumar Adesara (13 Points )

-2voto

Sam Bokai avatar
Sam Bokai Points 162

Essayez html, body { height: 100% } pour quelque chose de l'ordre de 100vh sur les appareils mobiles.

Répondu el 21 de Mai, 2020 par Sam Bokai (162 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X