recherche

Maison >interface Web >tutoriel CSS >Comment puis-je définir la hauteur ou la largeur d'un élément en pourcentage moins une valeur de pixel fixe en CSS ?

Comment puis-je définir la hauteur ou la largeur d'un élément en pourcentage moins une valeur de pixel fixe en CSS ?

Linda Hamilton
Linda Hamiltonoriginal
2025-01-03 01:25:39906parcourir

How Can I Set an Element's Height or Width as a Percentage Minus a Fixed Pixel Value in CSS?

Définition de la largeur/hauteur en pourcentage moins les pixels

Un défi courant en CSS consiste à spécifier la hauteur ou la largeur d'un élément en pourcentage de son conteneur moins une valeur fixe. Considérez le scénario suivant :

Vous disposez d'un conteneur

avec une hauteur inconnue et un en-tête
en son sein. Sous l’en-tête, vous souhaitez qu’une liste non ordonnée occupe l’espace restant, avec une hauteur d’en-tête connue de 18 px. Comment pouvez-vous spécifier dynamiquement la hauteur de la liste comme « 100 % moins 18 px » ?

Solution

La solution réside dans l'utilisation de la fonction calc() :

height: calc(100% - 18px);

Ceci L'expression calcule la hauteur en soustrayant la valeur fixe connue (18 px), permettant à la liste de s'étendre pour remplir l'espace restant dans le conteneur.

Compatibilité des navigateurs

Bien que calc() soit largement pris en charge, certains navigateurs existants nécessitent des versions spécifiques au fournisseur :

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);

Pour une compatibilité complète entre navigateurs, pensez en utilisant toutes les versions avec la syntaxe standard à la fin :

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

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!

css for require using function this
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：Pourquoi mes images d’arrière-plan ne s’affichent-elles pas correctement dans Safari ?Article suivant：Pourquoi mes images d’arrière-plan ne s’affichent-elles pas correctement dans Safari ?

Articles Liés

Voir plus