Si vous avez passé plus de dix minutes à styliser une page web, vous vous êtes probablement heurté au mur classique du CSS : essayer de déterminer exactement quelle est la largeur en pixels d’une div à 50%.
Parfois, le CSS donne l’impression de suivre une recette où les mesures se résument à « un peu de farine » et « un peu d’eau ». Vous voulez des chiffres exacts, mais le CSS vous donne des proportions relatives.
La bonne nouvelle ? Convertir des pourcentages en pixels n’a rien d’une magie noire. Il s’agit en fait d’une simple arithmétique de base, et une fois que vous aurez compris la règle d’or des pourcentages CSS, vous n’aurez plus jamais à deviner les dimensions de votre mise en page.
Décomposons cela étape par étape.
La règle d’or : tout dépend du parent
Avant de faire un quelconque calcul, nous devons parler de la façon dont le CSS raisonne.
Imaginez un grand cadre photo vide accroché à votre mur. Ce cadre fait 1 000 pixels de large. Si vous demandez à une photo d’occuper 50% de l’espace, elle prendra la moitié du cadre (500 pixels).
En CSS, ce cadre photo est appelé le conteneur parent. Une valeur en pourcentage dans CSS n’existe pas dans le vide. C’est toujours, toujours, toujours un pourcentage de son parent direct.
Si vous ne connaissez pas la taille du conteneur parent, vous ne pouvez pas calculer la valeur en pixels de l’enfant. C’est aussi simple que cela !
Le calcul simple derrière la conversion
Une fois que vous connaissez la largeur (ou la hauteur) en pixels de votre conteneur parent, le calcul est simple. Voici la formule :
(Taille du parent en pixels × Pourcentage) ÷ 100 = Pixels cibles
Disons que votre <div> parent fait 800px de large, et que vous voulez qu’une <div> enfant occupe 75 % de la largeur.
-
800 × 75 = 60 000
-
60 000 ÷ 100 = 600px
Votre conteneur enfant s’affichera à exactement 600 pixels de large.
Exemple étape par étape : mise en pratique
Examinons un scénario concret. Vous construisez une mise en page de blog classique : une zone de contenu principal et une barre latérale (sidebar), placées côte à côte à l’intérieur d’un conteneur englobant (wrapper).
Voici votre HTML :
<div class="wrapper">
<div class="main-content">Ceci est l'article.</div>
<div class="sidebar">Ceci est la barre latérale.</div>
</div>Voici votre CSS :
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Étape 1 : Identifiez le parent
Le parent de .main-content et de .sidebar est le .wrapper.
Étape 2 : Trouvez la valeur en pixels du parent
En regardant notre CSS, le .wrapper est défini en dur à 1200px.
Étape 3 : Faites le calcul
-
Contenu principal : (1200 × 70) ÷ 100 = 840px
-
Barre latérale : (1200 × 30) ÷ 100 = 360px
Si vous inspectez ces éléments dans les outils de développement de votre navigateur, vous verrez qu’ils équivalent exactement à 840px et 360px.
Les pièges classiques : Padding, Marges et Box-Sizing
Dans un monde parfait, ce calcul suffirait. Mais le CSS a une façon sournoise de perturber nos calculs : le modèle de boîte (box model).
Par défaut, si vous indiquez à une boîte de faire 50 % de large, puis que vous lui ajoutez 20 px de rembourrage (padding), le CSS ajoute ces 20 px par-dessus les 50 %. Soudainement, votre boîte est plus large que ce que vous aviez calculé, et toute votre mise en page passe à la ligne suivante.
La solution : Utilisez toujours box-sizing: border-box;.
* {
box-sizing: border-box;
}Considérez border-box comme une façon de dire à votre navigateur : « Quand je dis 50 %, je veux dire 50 % au total, incluant le padding et les bordures. Débrouille-toi. » Cela maintient vos conversions en pixels précises et évite de casser votre mise en page.
Remarque : Les marges externes (margins) s’appliquent toujours à l’extérieur de la boîte, vous devrez donc les prendre en compte séparément !
Votre pense-bête de référence rapide
Vous ne voulez pas sortir une calculatrice à chaque fois que vous écrivez du CSS ? Voici un pense-bête pour les pourcentages courants basés sur les largeurs de conteneurs parents standards.
| Largeur du parent | 10% | 25% | 33.33% (Un tiers) | 50% | 75% |
| 800px | 80px | 200px | ~266px | 400px | 600px |
| 1000px | 100px | 250px | ~333px | 500px | 750px |
| 1200px | 120px | 300px | 400px | 600px | 900px |
| 1440px | 144px | 360px | 480px | 720px | 1080px |
Convertir des pourcentages en pixels n’est en fait qu’un exercice consistant à retrouver votre conteneur parent. Une fois que vous connaissez la taille du « cadre photo », le dimensionnement de son contenu devient un jeu d’enfant.
Et si jamais vous devez faire exactement l’inverse — trouver le pourcentage à partir d’une valeur fixe en pixels — vous pouvez vous épargner les calculs et utiliser directement un convertisseur de pixels en pourcentages rapide.