Solution au problème selon lequel la page ne saute pas lorsque la barre de défilement Calc apparaît-tutoriel CSS-php.cn

Solution au problème selon lequel la page ne saute pas lorsque la barre de défilement Calc apparaît

php中世界最好的语言

Libérer： 2018-03-21 11:55:38

original

1518 Les gens l'ont consulté

Cette fois, je vais vous apporter une solution au problème selon lequel la page ne saute pas lorsque la barre de défilement Calc apparaît. Quelles sont les précautions pour résoudre le problème lorsque la barre de défilement Calc apparaît et la page. ne saute pas Voici un cas pratique, jetons un coup d'oeil.

Qu'est-ce que calc() ?

calc() littéralement, nous pouvons le comprendre comme une fonction fonction . En fait, calc est l'abréviation du mot anglais calculate. C'est une nouvelle fonction de CSS3 et est utilisée pour spécifier la longueur des éléments. Par exemple, vous pouvez utiliser calc() pour définir des valeurs dynamiques pour les propriétés border, margin, padding, font-size et width d'un élément. Pourquoi s’appelle-t-on une valeur dynamique ? Parce que nous utilisons des expressions pour obtenir la valeur. Cependant, le plus grand avantage de calc() est qu'il peut être utilisé dans une mise en page fluide. La largeur de l'élément peut être calculée via calc().

Syntaxe

calc() = calc(四则运算)

Copier après la connexion

Par exemple :

.elm {
  width: calc(expression);
}

Copier après la connexion

où "expression" est une expression utilisée pour calculer la longueur

Description

est utilisé pour calculer dynamiquement la valeur de longueur.

Il est à noter qu'un espace doit être réservé avant et après l'opérateur, par exemple : width: calc(100% - 10px)
N'importe quelle valeur de longueur peut être calculée à l'aide de la fonction calc()
La fonction calc() prend en charge "+", "-", "*", "/" opérations ;
La fonction calc() utilise des règles de priorité mathématique standard

Compatibilité

Exemple simple :

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

Copier après la connexion

Expliquons la plus couramment utilisée : l'application qui implémente la page sans sauter lorsque la barre de défilement apparaît

Lorsque le le contenu de la page est chargé dynamiquement, il n'y a pas de barre de défilement au début et la barre de défilement apparaît une fois le contenu augmenté. À ce stade, l'utilisation d'une mise en page alignée au centre à largeur fixe déplacera la largeur de la barre de défilement vers la gauche. La solution peut être d'ajouter overflow-y:scroll à tout le contenu ; ou de le remplir de CSS en fonction du contenu puis d'ajouter le contenu. Cet article présente calc pour calculer la largeur de la barre de défilement. Lorsqu'il y a une barre de défilement, une largeur de barre de défilement est également simulée en dehors du contenu, elle ne sera donc pas décalée. ·

C'est très simple, une seule ligne de code est requise :

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

Copier après la connexion

ou :

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

Copier après la connexion

Tout d'abord, .wrap-outer fait référence au corps centré à largeur fixe Le parent des navigateurs le prend en charge essentiellement (ne peut pas être utilisé avec

background-position

Enfin, 100vw est la largeur interne du navigateur par rapport à la fenêtre du navigateur) ; innerWidth Notez que la largeur de la barre de défilement est également comptée ! Et 100 % est la largeur disponible, qui est la largeur sans barres de défilement.

Donc, calc(100vw - 100%) est la largeur de la barre de défilement du navigateur (s'il y en a une, elle vaut 0 s'il n'y a pas de barre de défilement) ! S'il y a une largeur de barre de défilement à gauche et à droite (ou les deux valent 0), le contenu principal peut toujours être centré dans le navigateur, donc il n'y a pas de saut !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Explication détaillée de l'utilisation de concentration intérieure

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!