Maison > Article > interface Web > Résolvez le problème selon lequel la barre de défilement CSS3 Calc ne saute pas sur la page

Résolvez le problème selon lequel la barre de défilement CSS3 Calc ne saute pas sur la page

巴扎黑original: 2017-09-18 11:31:382037parcourir

Calc est une nouvelle fonction de CSS3, qui est utilisée pour spécifier la longueur des éléments. Le plus grand avantage de calc() est qu'il est utilisé dans une mise en page fluide. La largeur de l'élément peut être calculée via calc(). Ensuite, l'éditeur de Script House partagera avec vous l'implémentation CSS3 Calc du problème de la barre de défilement où la page ne saute pas. Les amis qui en ont besoin peuvent s'y référer

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" is Une expression utilisée pour calculer la longueur

Description

est utilisée pour calculer dynamiquement la valeur de la 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>

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 contenu de la page est chargé dynamiquement et qu'il n'y a pas de barre de défilement au début, mais que la barre de défilement apparaît une fois le contenu augmenté, 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 :

.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 parent du corps centré à largeur fixe. Sinon, créez-en un (des effets similaires peuvent également être obtenus en utilisant le corps, mais ce n'est pas recommandé sur la base du principe. de séparation en largeur);

Ensuite, calc est un calcul en CSS3, pris en charge par les navigateurs IE10+, et essentiellement pris en charge par les navigateurs IE9 (ne peut pas être utilisé pour la position d'arrière-plan

Enfin, 100vw) ; est relatif à la fenêtre du navigateur.innerWidth, Est la largeur interne du navigateur. Notez que la largeur de la barre de défilement est également incluse dans le calcul ! 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 sans aucun saut !

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!

Déclaration：

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

Article précédent：Implémentation CSS3 pure de l'affichage d'un exemple de fonction de champ de rechercheArticle suivant：Implémentation CSS3 pure de l'affichage d'un exemple de fonction de champ de recherche

Articles Liés

Voir plus