CSS peut-il calculer la largeur de la fenêtre sans barres de défilement ?

Mesurer la largeur de la fenêtre sans barres de défilement à l'aide de CSS

Le CSS peut-il être utilisé pour calculer la largeur de la fenêtre (vw) sans inclure la barre de défilement ?

Divers utilisateurs constatent des écarts entre la valeur vw et la largeur réelle du corps, ce qui exclut les barres de défilement. Par exemple, alors que la résolution de l'écran peut être de 1 920 px, le vw renvoie 1 920 px, bien que la largeur du corps soit plus proche de 1 903 px.

La clé réside dans la compréhension que la largeur à 100 % en CSS englobe à la fois la fenêtre d'affichage et la barre de défilement. Pour isoler la largeur de la fenêtre d'affichage, le calcul suivant peut être utilisé :

body {
  width: calc(100vw - (100vw - 100%));
}

Ce calcul soustrait la largeur de la barre de défilement de la largeur totale de la fenêtre d'affichage, fournissant ainsi la largeur souhaitée sans barres de défilement.

De plus, cette technique peut être étendue aux mesures de hauteur. Par exemple, pour créer un élément carré qui occupe 50 % de la fenêtre tout en excluant la barre de défilement, le code suivant peut être utilisé :

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

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!