Comment calculer la largeur de la fenêtre (vw) en excluant la barre de défilement en CSS ?

Calcul de la largeur de la fenêtre (vw) à l'exclusion de la barre de défilement en CSS

Comme mentionné dans la question d'origine, obtenir la largeur de la fenêtre (vw) sans tenir compte car la barre de défilement peut être un défi en utilisant uniquement CSS. Cependant, il existe une solution de contournement impliquant la fonction calc() qui peut y parvenir.

Dans calc(), 100 % représente la largeur de la fenêtre d'affichage, y compris la barre de défilement. En soustrayant la différence entre 100 % et 100 vw, vous pouvez effectivement ignorer la largeur de la barre de défilement :

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

Cette expression attribue à l'élément body une largeur égale au vw moins la largeur de la barre de défilement.

De plus, cette approche peut être appliquée à n’importe quel élément, et pas seulement aux enfants directs du corps. Par exemple, pour créer un carré qui occupe 50 % de la fenêtre tout en excluant la largeur de la barre de défilement :

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%) / 2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%) / 2));
}</code>

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!