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

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

Libérer： 2025-01-03 01:25:39

original

903 Les gens l'ont consulté

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);

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion

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!

Article précédent：Pourquoi mes images d’arrière-plan ne s’affichent-elles pas correctement dans Safari ? Article suivant：CSS peut-il modifier directement l'attribut source d'une image ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2681

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2817

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2378

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...