Maison > Article > interface Web > Comment résoudre le problème des éléments fixes qui ne s'affichent pas sur les terminaux mobiles

Comment résoudre le problème des éléments fixes qui ne s'affichent pas sur les terminaux mobiles

不言original: 2018-08-02 10:44:063029parcourir

Cet article vous présente comment résoudre le problème des éléments fixes qui ne s'affichent pas sur le terminal mobile. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

J'ai créé une page imbriquée html5 pour l'application de l'entreprise au cours des dernières semaines. La page n'est pas compliquée et contient beaucoup de contenu d'affichage. Il y a un pied de page en bas

Le html. La structure est la suivante

<style>
  .main{
    position: absolute;
    top: 0;
    bottom: 88px;
    left: 0;
    width: 100%;
    overflow-y: auto;
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
<style>
<body>
  <div class="main">
    ...
  </div>
  <footer></footer>
</body>

Une fois le débogage du contenu terminé, j'ai inséré d'autres projets. Plus tard, le développement de l'application m'a dit de surveiller le défilement de la page et m'a demandé de ne pas utiliser la mise en page de positionnement. Je vois qu'il n'y a pas de place sur la page pour la saisie et qu'il n'y aura aucun élément fixe qui circulera. La partie principale a donc été modifiée pour une mise en page normale, puis il y a eu un bug :
Tout était normal sur Android Sur IOS10, parfois le pied de page n'apparaissait pas lors de l'entrée dans la page, et il n'apparaissait qu'après avoir glissé ou doublé. -en cliquant (d'autres versions de tests IOS ont dit que c'était le cas. C'est encore normal)

La première pensée lorsque l'on rencontre ce problème est d'augmenter l'index z du pied de page et de le fixer à 1000, mais le résultat est inutile. Observez bien que le contenu des pages qui ne sont pas affichées est très court et n'atteint pas la position du pied de page. Je suppose que c'est un problème de hauteur du corps. J'ai ajouté un débogage de style au corps

background: #fafafa;
min-height: 100vh;

<.>Le fond de la page entière est effectivement devenu gris. Mais le pied de page ne s'affiche toujours pas

Après avoir discuté avec des collègues, j'ai deviné qu'il y avait un problème de calque dans le rendu du téléphone mobile. au début. Après avoir cliqué ou touché, la page a restitué le pied de page et c'était normal.

Il était presque en ligne à ce moment-là. Afin de résoudre le bug au plus vite et sans tracas, j'ai défini tanslateZ pour le pied de page, ce qui équivaut à créer un niveau indépendant

-webkit-transform: translateZ(1px)
transform: translate(1px)

. Il existe également un paramètre de calque contextuel sur la page z-index, le pied de page ne peut pas être couvert par la couche élastique de traduction, indiquant que le niveau de tranzlateZ est plus élevé. Ce sera normal si la couche élastique est réglée sur translationZ (2px)

Cette méthode n'est pas très élégante, mais l'avantage est qu'elle ne change pas la disposition et est toujours applicable en cas d'urgence

Recommandé associé articles :

Introduction à la mise en page du Saint Graal et à la mise en page Double Flying Wing en CSS (avec code)

Comment implémenter le retour à la ligne d'éléments flottants en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à la mise en page Holy Grail et à la mise en page Double Flying Wing en CSS (avec code)Article suivant：Introduction à la mise en page Holy Grail et à la mise en page Double Flying Wing en CSS (avec code)

Articles Liés

Voir plus