Comment calculer la largeur de la fenêtre (vw) à l'exclusion de 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 uniquement

La question se pose : CSS seul peut-il déterminer le vw à l'exclusion des barres de défilement ? Considérons un écran d'une largeur de 1920 px, où vw renvoie 1920 px. Cependant, la largeur réelle du corps est d'environ 1 903 px.

Pour résoudre cet écart, utilisez la fonction CSS calc(). En calculant 100vw moins (100vw - 100%), la valeur résultante représente le vw hors largeur de la barre de défilement.

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

De plus, cette technique peut être appliquée aux calculs de hauteur. Par exemple, pour créer un carré qui occupe 50 % de la largeur de la fenêtre moins 50 % de 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!