Propriété CSS column-height

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

/* Valeurs avec un mot-clé */
column-height: auto;
/* Valeurs de type <length> */
column-height: 300px;
column-height: 25em;
column-height: 70vh;
/* Valeurs globales */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;

<ol>
 <li>Un poisson</li>
 <li>Deux poissons</li>
 <li>Poisson rouge</li>
 <li>Poisson bleu</li>
 ...
</ol>
<p>-- Dr. Seuss</p>

<ol>
 <li>Un poisson</li>
 <li>Deux poissons</li>
 <li>Poisson rouge</li>
 <li>Poisson bleu</li>
 <li>Poisson noir</li>
 <li>Poisson bleu</li>
 <li>Poisson vieux</li>
 <li>Poisson nouveau.</li>
 <li>Celui-ci a une petite étoile.</li>
 <li>Celui-ci a une petite voiture.</li>
 <li>Dis&nbsp;! Quelle quantité</li>
 <li>De poissons il y a.</li>
 <li>Oui. Certains sont rouges. Et certains sont bleus.</li>
 <li>Certains sont vieux. Et certains sont nouveaux.</li>
 <li>Certains sont tristes.</li>
 <li>Et certains sont joyeux.</li>
 <li>Et certains sont très, très mauvais.</li>
 <li>Pourquoi sont-ils</li>
 <li>Tristes et joyeux et mauvais&nbsp;?</li>
 <li>Je ne sais pas.</li>
 <li>Allez demander à votre père.</li>
 <li>Certains sont minces.</li>
 <li>Et certains sont gros.</li>
 <li>Le gros a</li>
 <li>Un chapeau jaune.</li>
 <li>De là à ici, d'ici à là,</li>
 <li>Des choses amusantes</li>
 <li>Sont partout.</li>
</ol>
<p>--Dr. Seuss</p>

ol {
 column-width: 150px;
 gap: 2em;
 column-height: 3em;
}

<h1>Résumés HTML, CSS et JavaScript</h1>
<p>
 <strong>HTML</strong> (HyperText Markup Language) est le bloc de construction
 le plus basique du Web. Il définit le sens et la structure du contenu web.
 D'autres technologies, en plus de HTML, sont généralement utilisées pour
 décrire l'apparence (CSS) ou le comportement (JavaScript) d'une page web.
</p>
<p>
 «&nbsp;L'Hypertexte&nbsp;» fait référence aux liens qui connectent les pages
 web entre elles, soit au sein d'un même site web, soit entre différents sites
 web. Les liens sont un aspect fondamental du Web. En téléchargeant du contenu
 sur Internet et en le liant à des pages créées par d'autres personnes, vous
 devenez un participant actif du World Wide Web.
</p>
<p>
 Le HTML utilise le «&nbsp;balisage&nbsp;» pour annoter le texte, les images et
 d'autres contenus afin de les afficher dans un navigateur Web. Le balisage
 HTML comprend des «&nbsp;éléments&nbsp;» spéciaux tels que
 <a href="/fr/docs/Web/HTML/Reference/Elements/head"
 ><code>&lt;head&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/title"
 ><code>&lt;title&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/body"
 ><code>&lt;body&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/header"
 ><code>&lt;header&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/footer"
 ><code>&lt;footer&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/article"
 ><code>&lt;article&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/section"
 ><code>&lt;section&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/p"> <code>&lt;p&gt;</code> </a>,
 <a href="/fr/docs/Web/HTML/Reference/Elements/div"><code>&lt;div&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/span"
 ><code>&lt;span&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/img"><code>&lt;img&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/aside"
 ><code>&lt;aside&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/audio"
 ><code>&lt;audio&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/canvas"
 ><code>&lt;canvas&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/datalist"
 ><code>&lt;datalist&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/details"
 ><code>&lt;details&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/embed"
 ><code>&lt;embed&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/nav"><code>&lt;nav&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/search"
 ><code>&lt;search&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/output"
 ><code>&lt;output&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/progress"
 ><code>&lt;progress&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/video"
 ><code>&lt;video&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/ul"><code>&lt;ul&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/ol"><code>&lt;ol&gt;</code></a
 >,
 <a href="/fr/docs/Web/HTML/Reference/Elements/li"><code>&lt;li&gt;</code></a>
 et bien d'autres.
</p>
<p>
 Un élément HTML est distingué du reste du texte dans un document par des
 «&nbsp;balises&nbsp;», qui consistent en le nom de l'élément entouré de
 <code>&lt;</code> et <code>&gt;</code>. Le nom d'un élément à l'intérieur
 d'une balise n'est pas sensible à la casse. C'est-à-dire qu'il peut être écrit
 en majuscules, en minuscules ou dans un mélange des deux. Par exemple, la
 balise <code>&lt;title&gt;</code> peut être écrite comme
 <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, ou de toute autre
 manière. Cependant, la convention et la pratique recommandée est d'écrire les
 balises en minuscules.
</p>
<hr />
<p>
 <strong>Les feuilles de style en cascade</strong>
 (<strong>CSS</strong>) est un
 <a href="/fr/docs/Web/API/StyleSheet">langage de feuilles de style</a>
 utilisé pour décrire la présentation d'un document écrit en
 <a href="/fr/docs/Web/HTML">HTML</a> ou
 <a href="/fr/docs/Web/XML/Guides/XML_introduction">XML</a> (y compris les
 dialectes XML tels que <a href="/fr/docs/Web/SVG">SVG</a>,
 <a href="/fr/docs/Web/MathML">MathML</a> ou
 <a href="/fr/docs/Glossary/XHTML">XHTML</a>). CSS décrit comment les éléments
 doivent être rendus à l'écran, sur papier, à l'oral ou sur d'autres supports.
</p>
<p>
 CSS fait partie des langages de base du <strong>web ouvert</strong> et est
 standardisé à travers les navigateurs web selon
 <a
 href="https://www.w3.org/Style/CSS/#specs"
 class="external"
 target="_blank">
 les spécifications du W3C <sup>(angl.)</sup> </a
 >. Auparavant, le développement de différentes parties de la spécification CSS
 se faisait de manière synchrone, ce qui permettait la version des dernières
 recommandations. Vous avez peut-être entendu parler de CSS1, CSS2.1, ou même
 CSS3. Il n'y aura jamais de CSS3 ou de CSS4&nbsp;; plutôt, tout est maintenant
 simplement «&nbsp;CSS&nbsp;» avec des modules CSS individuels ayant des
 numéros de version.
</p>
<p>
 Après CSS 2.1, la portée de la spécification a considérablement augmenté et le
 progrès des différents modules CSS a commencé à différer tellement, qu'il est
 devenu plus efficace de
 <a
 href="https://www.w3.org/Style/CSS/current-work"
 class="external"
 target="_blank">
 développer et publier des recommandations séparément par module
 <sup>(angl.)</sup> </a
 >. Au lieu de versionner la spécification CSS, le W3C prend maintenant
 périodiquement un instantané de
 <a href="https://www.w3.org/TR/css/" class="external" target="_blank">
 l'état stable le plus récent de la spécification CSS
 <sup>(angl.)</sup>
 </a>
 et le progrès des modules individuels. Les modules CSS ont maintenant des
 numéros de version, ou des niveaux, tels que
 <a
 href="https://drafts.csswg.org/css-color-5/"
 class="external"
 target="_blank"
 >CSS Color Module Level 5 <sup>(angl.)</sup></a
 >.
</p>
<hr />
<p>
 <strong>JavaScript</strong> (<strong>JS</strong>) est un langage de
 programmation léger interprété (ou
 <a href="/fr/docs/Glossary/Just_In_Time_Compilation">compilé juste-à-temps</a
 >) avec des
 <a href="/fr/docs/Glossary/First-class_Function">
 fonctions de première classe </a
 >. Bien qu'il soit surtout connu comme le langage de script pour les pages
 Web,
 <a
 href="https://fr.wikipedia.org/wiki/JavaScript#Autres_utilisations"
 class="external"
 target="_blank"
 >de nombreux environnements non-navigateurs</a
 >
 l'utilisent également, tels que
 <a href="/fr/docs/Glossary/Node.js">Node.js</a>,
 <a href="https://couchdb.apache.org/" class="external" target="_blank"
 >Apache CouchDB</a
 >
 et
 <a
 href="https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/"
 class="external"
 target="_blank"
 >Adobe Acrobat</a
 >. JavaScript est un langage
 <a href="/fr/docs/Glossary/Prototype-based_programming">
 basé sur les prototypes </a
 >,
 <a href="/fr/docs/Glossary/Garbage_collection">
 avec gestion automatique de la mémoire </a
 >, <a href="/fr/docs/Glossary/Dynamic_typing">dynamique</a>, supportant
 plusieurs paradigmes tels que impératif, fonctionnel et orienté objet.
</p>
<p>
 Les capacités dynamiques de JavaScript incluent la construction d'objets à
 l'exécution, les listes de paramètres variables, les variables de fonction, la
 création de scripts dynamiques (avec
 <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval"
 ><code>eval</code></a
 >), l'introspection des objets (avec
 <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in"
 ><code>for...in</code></a
 >
 et
 <a
 href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object#méthodes_statiques"
 >les <code>Object</code> utilitaires</a
 >), et la récupération du code source (les fonctions JavaScript stockent leur
 texte source et peuvent être récupérées avec
 <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"
 ><code>toString()</code></a
 >).
</p>
<p>
 Cette section est dédiée au langage JavaScript lui-même, et non aux parties
 spécifiques aux pages Web ou à d'autres environnements hôtes. Pour des
 informations sur les <a href="/fr/docs/Glossary/API">API</a>
 spécifiques aux pages Web, veuillez consulter
 <a href="/fr/docs/Web/API">Web APIs</a> et
 <a href="/fr/docs/Glossary/DOM">DOM</a>.
</p>
<p>
 Les standards pour JavaScript sont les
 <a href="https://tc39.es/ecma262/" class="external" target="_blank"
 >ECMAScript Language Specification <sup>(angl.)</sup></a
 >
 (ECMA-262) et la
 <a href="https://tc39.es/ecma402/" class="external" target="_blank">
 ECMAScript Internationalization API specification <sup>(angl.)</sup>
 </a>
 (ECMA-402). Dès qu'un navigateur implémente une fonctionnalité, nous essayons
 de la documenter. Cela signifie que dans certains cas, des
 <a href="https://github.com/tc39/proposals" class="external" target="_blank">
 propositions pour de nouvelles fonctionnalités ECMAScript
 <sup>(angl.)</sup>
 </a>
 ont déjà été implémentées dans les navigateurs, documentation et exemples dans
 les articles MDN peuvent utiliser certaines de ces nouvelles fonctionnalités.
 La plupart du temps, cela se produit entre les
 <a href="https://tc39.es/process-document/" class="external" target="_blank"
 >étapes <sup>(angl.)</sup></a
 >
 3 et 4, et se produit généralement avant que la spécification ne soit
 officiellement publiée.
</p>
<p>
 Ne confondez pas JavaScript avec le
 <a
 href="https://fr.wikipedia.org/wiki/Java_(langage)"
 class="external"
 target="_blank"
 >langage de programmation Java</a
 >
 —
 <strong>JavaScript n'est <em>pas</em> «&nbsp;Java interprété&nbsp;»</strong>.
 Les deux termes «&nbsp;Java&nbsp;» et «&nbsp;JavaScript&nbsp;» sont des
 marques déposées ou des marques commerciales d'Oracle aux États-Unis et dans
 d'autres pays. Cependant, les deux langages de programmation ont une syntaxe,
 une sémantique et une utilisation très différentes.
</p>
<p>
 La documentation JavaScript des fonctionnalités de base du langage
 (principalement
 <a href="/fr/docs/Web/JavaScript/Reference/JavaScript_technologies_overview"
 >ECMAScript <sup>(angl.)</sup></a
 >, pour la plupart) inclut les éléments suivants&nbsp;:
</p>

body {
 column-width: 150px;
 column-rule: 2px solid red;
 gap: 3em 2em;
 padding: 0 2em;
 column-height: 95vh;
 column-wrap: wrap;
}

h1 {
 column-span: all;
}
p:first-of-type {
 margin-top: 0;
}

html {
 scroll-snap-type: y mandatory;
}
::column {
 scroll-snap-align: start;
}

* {
 box-sizing: border-box;
}
html {
 font-family: "Arial", sans-serif;
}
p {
 line-height: 1.5;
}
@supports not (column-height: 15em) {
 body::before {
 content: "Votre navigateur ne prend pas en charge la propriété 'column-height'.";
 background-color: wheat;
 position: fixed;
 inset: 40% 0;
 height: fit-content;
 text-align: center;
 padding: 1rem 0;
 }
}

<form>
 <div>
 <label for="columns">
 <code>column-count <output id="columns-output">3</output></code>
 </label>
 <input type="range" min="3" max="6" value="3" id="columns" />
 </div>
 <div>
 <label for="column-height">
 <code>column-height <output id="column-height-output">20em</output></code>
 </label>
 <input type="range" min="10" max="30" value="20" id="column-height" />
 </div>
</form>

const columnsRange = document.getElementById("columns");
const columnsOutput = document.getElementById("columns-output");
const columnHeightRange = document.getElementById("column-height");
const columnHeightOutput = document.getElementById("column-height-output");
columnsRange.addEventListener("input", () => {
 document.body.style.columnCount = columnsRange.value;
 columnsOutput.textContent = columnsRange.value;
});
columnHeightRange.addEventListener("input", () => {
 document.body.style.columnHeight = `${columnHeightRange.value}em`;
 columnHeightOutput.textContent = `${columnHeightRange.value}em`;
});

body {
 column-count: 3;
 column-height: 20em;
 column-rule: 2px solid red;
 gap: 3em 2em;
 padding: 0 2em;
}

form {
 border: 1px solid black;
 background-color: white;
 padding: 10px;
 position: fixed;
 bottom: 1px;
 right: 1px;
}
form div {
 display: flex;
 gap: 1em;
 align-items: center;
 justify-content: space-between;
}

Aider à améliorer MDN

Cette page a été modifiée le 20 avr. 2026 par les contributeur·ice·s du MDN.