Comment puis-je définir la hauteur ou la largeur d'un élément en pourcentage moins une valeur de pixel fixe en 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!