Column-height - Propriété CSS

column-height

Résumé des caractéristiques de la propriété column-height

Description rapide
Définit la hauteur des colonnes, dans le cas d'une mise en page sur plusieurs colonnes. Celle-ci peut être inférieure à la hauteur du conteneur, on obtient alors une sorte de tableau.
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété column-height passe progressivement d'une valeur à une autre.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de column-height.

column-height - Syntax DiagramSyntax diagram of the column-height CSS property, which defines the height of the columns, even if it fragments the content. auto auto length lengthcolumn-height:;column-height:;
Schéma syntaxique de la propriété column-height.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

Description des termes utilisés sur le schéma :

Description de la propriété column-height.

⚠
column-height est une propriété encore expérimentale. Firefox   et Opera   par exemple ne la reconnaissent pas.

column-height définit la hauteur des colonnes. Si le contenu est plus grand, un nouveau jeu de colonnes est repris en dessous. On obtient ainsi un tableau dans lequel le contenu se réparti automatiquement dans les cellules.
L'espace horizontal est défini par row-gap.

⚠ ne marche pas sur tous les navigateurs.

Voici l'exemple d'un texte mis en forme sur 2 colonnes. Celles-ci ont une hauteur définie à 50 pixels, mais le contenu déborde largement ces dimensions. On voit que les colonnes ont bien une hauteur de 70 pixels, mais que le contenu reprend dans deux colonnes supplémentaires situes en dessous;

Valeurs pour column-height.

  • column-height: auto;

    La hauteur des colonnes est calculée automatiquement, essentiellement à partir de la propriété height du conteneur.

    Ce texte est mis en forme en deux colonnes. La propriété column-height a été fixée à auto, la hauteur des colonnes est donc déterminée automatiquement. La plupart du temps elle est déterminée par la valeur de height.
    column-height:auto;
  • column-height: 400px;

    d est une valeur positive ou null, suivie d'une des unités de dimension. La hauteur des colonnes est fixée à la valeur indiquée.

    Ce texte est mis en forme en deux colonnes. La propriété column-height a été déterminée à 65px, la hauteur des colonnes est donc fixée à cette valeur. Si le contenu est suffisamment important un autre jeu de colonnes est crée pour le recevoir, et ainsi de suite.
    column-height:65px;
  • column-height: initial; (auto) column-height: inherit; column-height: revert; column-height: revertLayer; column-height: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de column-height.

La propriété column-height s'anime bien sûr, et de façon progressive. Sur l'exemple ci-dessous on a l'impression d'un passage brutal d'une valeur à l'autre, mais c'est le nombre de lignes par colonne, qui lui est un entier.
Le résultat de l'animation de column-height est un peu surprenant mais peut être utile dans certains cas.

Si un document est formé de sections contenant des informations de nature différente, vous pouvez ne pas le composer avec le même nombre de colonne. Par contre, un document ne contenant qu'un seul type d'information (comme un rapport de stage ou un mémoire de fin d'études...) doit, d'un bout à l'autre, conserver le même nombre de colonne.

Exemple interactif avec la propriété column-height.

column-height :
Chaque magazine ou journal recherche, pour se différencier, une architecture de colonne originale et dynamique. A cet objectif de vente, s'ajoute un objectif pratique : le lecteur doit d'un seul coup d'œil savoir où il se trouve. Ainsi, chaque section d'un magazine dispose en règle générale d'une mise en page originale : les éditoriaux sont en colonnes large, les information brèves en colonnes étroites, les articles de font en colonnes moyennes... Certaines pages disposent d'une seule colonne, d'autres en comportent jusqu'à cinq.

Compatibilité des navigateurs avec column-height.

La propriété column-height est encore mal reconnue par les navigateurs. Firefox   par exemple ne la traite pas.

Colonne 1
Prise en charge par les navigateurs de la propriété column-height qui définit la hauteur des colonnes, quitte à fractionner le texte.
1
Propriété
column-height
Estimation de la prise en charge globale.
49%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Chrome pour Androïd

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Opéra

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété column-height fait partie du module Module CSS - Mise en page multi-colonnes.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

column-count
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
column-fill
Gère la répartition du contenu entre les colonnes.
Column-height
Définit la hauteur des colonnes, dans le cas d'une mise en page sur plusieurs colonnes. Celle-ci peut être inférieure à la hauteur du conteneur, on obtient alors une sorte de tableau.
column-rule
Propriété résumé définissant tous les paramètres du trait de séparation entre les colonnes.
column-rule-color
Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
column-rule-style
Choisit le type de trait pour les filets séparant les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
column-rule-width
Définit l'épaisseur du filet de séparation entre les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
column-span
Gère le chevauchement du contenu sur plusieurs colonnes.
column-width
Définit la largeur des colonnes.
columns
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.