Column-height - Propriété CSS
Résumé des caractéristiques de la propriété column-height
autoautocolumn-height passe progressivement d'une valeur à une autre.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de column-height.
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 :
length: une valeur numérique, positive ou null, suivie d'une unités de dimension.
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 entre les cellules est défini par column-gap, tandis que l'espace vertical l'est par row-gap.
⚠ ne marche pas sur tous les navigateurs.
Voici l'ordre dans lequel les cellules se remplissent :
Valeurs pour column-height.
- column-height: auto;
La hauteur des colonnes est calculée automatiquement, essentiellement à partir de la propriété
heightdu 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 deheight.column-height:auto; - column-height: 400px; d
dest 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: revert-layer; column-height: revert-rule; column-height: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,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.
Accéder à la propriété column-height par programme.
Avec Javascript, modifier la valeur de column-height.
En Javascript, voici comment modifier la valeur de column-height.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['column-height'] = '500px';
// ou
let el = document.getElementById('id');
el.style.columnHeight = '500px';
Avec Javascript, lire la valeur de column-height.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['column-height'];
// ou
let el = document.getElementById('id');
let value = el.style.columnHeight;
Avec Javascript, lire la valeur calculée de column-height.
La valeur calculée est celle qui résulte de l'évaluation des unités relatives (sauf le pourcentage) et de la prise en compte éventuelle des valeurs héritées.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('column-height');
Avec JQuery, lire ou modifier la valeur de column-height.
JQuery, la librairie bien connue, propose également des syntaxes pour écrire ou relire la valeur de column-height.
// Lire la valeur :
$('#id').prop('column-height');
// Écrire la valeur :
$('#id').prop('column-height', '500px');
$('#id').prop('{column-height': '500px'});
Avec JQuery, lire la valeur calculée de column-height.
let value = $('#id').css('column-height');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété column-height et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de column-height. On constate en particulier
que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage en CSS).
Toutes les autres unités sont converties en pixels.
Exemple interactif avec la propriété column-height.
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.
column-height qui définit la hauteur des colonnes, quitte à fractionner le texte.column-heightNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
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.