Comment puis-je déterminer la largeur de la fenêtre (vw) à l'exclusion des barres de défilement en CSS ?

Détermination de la largeur de la fenêtre (vw) à l'exclusion des barres de défilement à l'aide de CSS

Comme mentionné dans la requête, calculer la largeur de la fenêtre (vw) sans barres de défilement uniquement via CSS peut être difficile. La mesure vw conventionnelle inclut l'espace occupé par les barres de défilement.

Solution CSS sans JavaScript

Cependant, une solution de contournement existe en utilisant la fonction calc en CSS. En soustrayant la différence entre 100 % (largeur de la fenêtre avec barres de défilement) et 100vw (largeur de la fenêtre hors barres de défilement) de 100vw, nous éliminons effectivement la largeur de la barre de défilement :

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>

Exemple

Par exemple, si la largeur de la fenêtre d'affichage est de 1920 px et que la barre de défilement occupe 17 px, le résultat :

100vw - (100vw - 100%) = 1920px - (1920px - 1903px) = 1903px

Conclusion

En utilisant cette expression de calcul, il est possible de calculer la largeur de la fenêtre d'affichage sans barres de défilement, fournissant ainsi une représentation plus précise de la zone visible réelle.

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!