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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Comment réparer KB5055612 ne parvient pas à s'installer dans Windows 10?

4 Il y a quelques semaines By DDD

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Grow A Garden - Guide de mutation complet

3 Il y a quelques semaines By DDD

Nordhold: Système de fusion, expliqué

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1671

14

Tutoriel CakePHP

1428

52

Tutoriel Laravel

1329

25

Tutoriel PHP

1276

29

Tutoriel C#

1256

24

Afficher plus