recherche

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

Comment puis-je définir la hauteur d'un conteneur sur un pourcentage moins une valeur de pixel fixe en CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-17 16:19:10969parcourir

How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?

Définition de la hauteur du conteneur en pourcentage moins une valeur fixe

Afin de maintenir la cohérence sur votre site Web et de réduire les styles inutiles, les classes CSS réutilisables peuvent être bénéfiques. Cependant, vous pouvez rencontrer des difficultés lors de la standardisation de certains éléments, comme la définition de la hauteur d'un élément conteneur en pourcentage de son conteneur parent moins une valeur de pixel spécifique.

Vous avez un conteneur

avec un en-tête
et une liste non ordonnée (
    ) à l'intérieur. Alors que la hauteur de l'en-tête est fixée à 18 px, la hauteur de la liste doit s'ajuster dynamiquement pour remplir l'espace restant dans le conteneur. Le problème survient lorsque vous devez spécifier la hauteur de la liste comme "100 % moins 18 px".

    Pour y parvenir, vous pouvez utiliser la fonction calc() :

    height: calc(100% - 18px);

    Cette fonction permet vous d'effectuer des calculs mathématiques dans CSS. Dans ce cas, il soustrait 18 px de 100 % pour déterminer la hauteur de la liste.

    Notez que pour les navigateurs plus anciens qui ne prennent pas en charge la fonction CSS3 calc(), vous devrez peut-être implémenter des versions spécifiques au fournisseur, car eh bien :

    /* 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 css3 for while function this ul issue
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 ma couleur d'arrière-plan ne change-t-elle pas au survol ?Article suivant：Pourquoi ma couleur d'arrière-plan ne change-t-elle pas au survol ?

Articles Liés

Voir plus