CSS Academy · Leçon

Largeurs fluides avec des pourcentages

Utilisez des largeurs en pourcentage pour créer des mises en page qui s’adaptent à leur conteneur.

Leçon 2 sur 413 étapes

Largeurs fluides avec des pourcentages est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Pourquoi utiliser des largeurs fluides ?

Les mises en page à largeur fixe (en pixels) posent problème sur les écrans plus étroits que la taille fixe. Les largeurs fluides utilisant des pourcentages permettent aux mises en page de s’adapter proportionnellement à la taille du conteneur ou de la fenêtre d’affichage.

Principes des largeurs en pourcentage

Une largeur en pourcentage est relative à la largeur du conteneur parent. Un élément enfant avec width: 50% fera toujours la moitié de la largeur de son parent.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

Pourcentages et dimensionnement des boîtes

Avec box-sizing: border-box, les largeurs en pourcentage incluent les marges intérieures et la bordure. Les colonnes en pourcentage deviennent ainsi faciles à gérer : 50% représente réellement la moitié, quelle que soit la marge intérieure.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

Mise en page fluide à deux colonnes

Une mise en page fluide simple fondée sur des flottants (ancienne méthode) :

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

Colonnes fluides avec Flexbox

Utiliser Flexbox pour créer des mises en page fluides en colonnes est plus propre :

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

Marge intérieure en pourcentage

Une marge intérieure en pourcentage est toujours relative à la largeur du parent (et non à sa hauteur), même pour les marges intérieures supérieure et inférieure. Cela permet de créer des astuces fondées sur le ratio d’aspect :

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

Ratio d’aspect moderne

La propriété aspect-ratio remplace l’astuce utilisant les marges intérieures pour conserver les ratios d’aspect :

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width avec une mise en page fluide

Combiner des largeurs en pourcentage avec max-width empêche les lignes de devenir trop larges sur les grands écrans :

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

Piège des hauteurs en pourcentage

Une hauteur en pourcentage exige que le parent ait une hauteur définie. Si le parent possède height: auto, les hauteurs en pourcentage des éléments enfants seront également calculées comme auto.

Mots-clés de dimensionnement intrinsèque

Le CSS moderne ajoute des options de dimensionnement plus fluides :

min-content : la plus petite taille permettant de contenir le contenu
max-content : la taille permettant de contenir tout le contenu sur une seule ligne
fit-content : une taille comprise entre min-content et max-content

<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

Motif de grille fluide

Une grille fluide courante utilisant inline-block (ancienne méthode) ou le CSS moderne :

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

Vérification rapide

Un parent mesure 600 px de largeur. Un enfant possède width: 60% et padding: 20px (box-sizing: border-box). Quelle est la largeur du contenu de l’enfant ?

Réponds-y dans la leçon interactive

Récapitulatif

Les largeurs en pourcentage créent des mises en page fluides qui s’adaptent à leur conteneur parent. Combinez-les avec max-width pour empêcher le contenu de devenir trop large. Utilisez aspect-ratio pour les médias adaptatifs. Flexbox et Grid gèrent les colonnes fluides avec plus d’élégance que les flottants en pourcentage.

Gratuit pour commencer

Apprends CSS avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Largeurs fluides avec des pourcentages » est-elle gratuite ?

Oui — le texte complet de « Largeurs fluides avec des pourcentages » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Largeurs fluides avec des pourcentages » ?

Utilisez des largeurs en pourcentage pour créer des mises en page qui s’adaptent à leur conteneur. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Largeurs fluides avec des pourcentages » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à CSS Academy