Comment puis-je définir la hauteur d'un élément à 100 % moins une valeur de pixel fixe à l'aide de CSS ?

Définition de la largeur/hauteur en pourcentage moins les pixels : un guide étape par étape

Dans le développement Web, il est essentiel de maintenir la cohérence et de minimiser l'encombrement du code. Lors de la définition de classes CSS pour des composants réutilisables, la personnalisation de la hauteur en fonction de différents contenus peut s'avérer difficile. Cet article aborde un scénario courant dans lequel vous souhaitez définir la hauteur d'une liste non ordonnée (ul) pour occuper l'espace restant dans un conteneur div après avoir pris en compte une hauteur d'en-tête fixe.

Pour y parvenir, CSS propose le fonction calc(). Cette fonction vous permet d'effectuer des calculs dans vos instructions CSS. Dans ce cas, vous pouvez utiliser la syntaxe suivante :

height: calc(100% - 18px);

Cela définit la hauteur de l'ul à 100 % de son parent, moins 18 px. Le 18px correspond à la hauteur fixe de votre div d'en-tête.

Notez que certains navigateurs plus anciens peuvent ne pas prendre en charge la fonction calc(). Pour garantir la compatibilité entre navigateurs, envisagez également d'implémenter des versions de la fonction spécifiques au fournisseur :

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

En incorporant la fonction calc() dans votre CSS, vous pouvez standardiser efficacement la hauteur de votre ul en fonction de le contenu dynamique de votre site Web. Cette technique améliore à la fois la cohérence et la flexibilité de votre code CSS.

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!