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

Hauteur basée sur un pourcentage moins les pixels pour un dimensionnement optimal des éléments

Améliorer la cohérence du site Web et réduire l'encombrement du code grâce à des classes CSS réutilisables est une entreprise louable. Lorsqu'il s'agit de récipients contenant du liquide, il devient nécessaire de déterminer comment régler la hauteur d'éléments spécifiques. Cet article aborde un scénario courant.

Considérons un conteneur div avec un en-tête div et une liste non ordonnée. L'objectif est d'attribuer à la liste la hauteur restante du conteneur, à l'exclusion de la hauteur fixe de l'en-tête de 18 pixels.

Pour y parvenir, CSS propose la fonction calc(), qui permet d'effectuer des calculs dynamiques dans le cadre de règles de style :

height: calc(100% - 18px);

Cette expression attribue à la liste une hauteur égale à 100% du conteneur, hors l'en-tête de 18px height.

Cependant, certains navigateurs plus anciens peuvent ne pas prendre en charge la fonction calc(). Dans de tels cas, envisagez d'utiliser des implémentations spécifiques au fournisseur :

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

En combinant efficacement des pourcentages et des valeurs fixes à l'aide de la fonction calc(), vous pouvez affiner le dimensionnement des éléments, garantir la cohérence et améliorer l'expérience globale de l'utilisateur. expérience sur votre site Web.

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!