Maison > Article > interface Web > Solution au problème selon lequel la page ne saute pas lorsque la barre de défilement Calc apparaît
Solution au problème selon lequel la page ne saute pas lorsque la barre de défilement Calc apparaît
- php中世界最好的语言original
- 2018-03-21 11:55:381487parcourir
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(四则运算)
Par exemple :
.elm {
width: calc(expression);
}
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é
<!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>Expliquons la plus couramment utilisée : l'application qui implémente la page sans sauter lorsque la barre de défilement apparaîtLorsque 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%);
} ou :
.wrap-outer {
padding-left: calc(100vw - 100%);
}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
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!