Maison > interface Web > tutoriel CSS > Pouvons-nous calculer la largeur de la fenêtre sans barres de défilement en CSS ?

Pouvons-nous calculer la largeur de la fenêtre sans barres de défilement en CSS ?

Barbara Streisand
Libérer: 2024-11-08 09:27:02
original
876 Les gens l'ont consulté

Can We Calculate Viewport Width Without Scrollbars in CSS?

Calcul de la largeur de la fenêtre sans barres de défilement en CSS

Question : Pouvons-nous déterminer la largeur de la fenêtre (vw) à l'exclusion des barres de défilement en utilisant uniquement CSS ?

Réponse : Oui, il est possible de calculer le vw sans comptabilité pour les barres de défilement utilisant CSS. Une méthode utilise la fonction calc() pour soustraire la largeur de la barre de défilement de la largeur de la fenêtre.

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>
Copier après la connexion

Dans ce code, 100vw représente la largeur complète de la fenêtre et 100 % représente la largeur de la fenêtre sans les barres de défilement. Le terme (100vw - 100%) calcule efficacement la largeur de la barre de défilement, qui est ensuite soustraite de 100vw.

Remarque supplémentaire : Cette technique peut également être appliquée pour calculer la hauteur d'un carré qui occupe la moitié de la largeur de la fenêtre d'affichage, à l'exclusion 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal