nl-equal-height

Égalisation de hauteur (Match Height) pour Webflow

Un script Vanilla JS léger pour forcer l'égalisation de la hauteur de vos divs ou cartes (cards) sur Webflow. Redimensionnement responsive optimisé intégré.

Installation :

≃ 5 minutes

Poids :

701 octets

June

2026

Description

Un script 100% Vanilla JS pour forcer un groupe d'éléments (comme des cartes de blog, des témoignages ou des blocs de texte) à avoir exactement la même hauteur. Le script trouve l'élément le plus grand et applique sa hauteur à tous les autres.

Fonctionnement : Contrairement à un simple CSS, le script réinitialise les hauteurs à auto avant chaque calcul. Cela lui permet de s'adapter parfaitement si le texte change ou si l'utilisateur redimensionne sa fenêtre.

Caractéristiques :

📱 Responsive optimisé (Debounce) : Le script recalcule automatiquement les hauteurs lors du redimensionnement de la fenêtre. Un délai anti-rebond (debounce) de 100ms est intégré pour garantir des performances optimales et éviter de faire "ramer" le navigateur.
🎯 Ciblage direct par classe CSS : Pas besoin d'ajouter des custom attributes partout. Il vous suffit d'indiquer la classe Webflow de votre élément directement dans le script JavaScript.
⚡️ Ultra léger & Zéro Dépendance : Quelques lignes de code natif, pas besoin d'importer de librairies externes (comme le célèbre plugin matchHeight de jQuery).

⚠️ Important

CSS Flexbox & Grid avant tout : Avant d'utiliser ce script, demandez-vous si Flexbox (Align: Stretch) ou CSS Grid (auto-rows: 1fr) ne peuvent pas résoudre votre problème nativement dans Webflow. Réservez ce script pour les cas complexes (éléments situés dans des listes séparées, structures HTML asymétriques).
Nomenclature Webflow : N'oubliez pas que Webflow convertit vos noms de classes en minuscules et remplace les espaces par des tirets. Si votre classe s'appelle Ma Carte Blog dans le Designer, vous devrez taper .ma-carte-blog dans le script.

Installation :

Étape 1 : Copiez ce bout de code juste au dessus des éléments à harmoniser

1<script>
2  // FIX: Egalisation hauteur des div (.REPLACE-ME)
3window.addEventListener('load', function() {
4  function equalizeHeights() {
5    const elements = document.querySelectorAll('.REPLACE-ME');
6    if (elements.length === 0) return;
7
8    elements.forEach(el => el.style.height = 'auto');
9    
10    let maxHeight = 0;
11    elements.forEach(el => {
12      if (el.offsetHeight > maxHeight) maxHeight = el.offsetHeight;
13    });
14
15    elements.forEach(el => el.style.height = maxHeight + 'px');
16  }
17
18  equalizeHeights();
19  // ajout delai pour la perf sur le resize
20  let timer;
21  window.addEventListener('resize', () => {
22    clearTimeout(timer);
23    timer = setTimeout(equalizeHeights, 100);
24  });
25});
26</script>

Copier

Étape 2 : Identifiez votre classe Webflow

Sélectionnez l'élément dont vous souhaitez uniformiser la hauteur (par exemple, vos cartes de services). Regardez son nom de classe dans le panneau de droite (Style Panel).Exemple : Si votre classe est Card Service, sa version pour le code sera .card-service.

Étape 3 : Modifiez le script

Une fois le code copié, trouvez la ligne 5 :

const elements = document.querySelectorAll('.REPLACE-ME');

‍

Remplacez simplement .REPLACE-ME par votre propre classe CSS :

const elements = document.querySelectorAll('.card-service');

‍

Pour garder votre projet propre et organisé, je vous invite également à mettre à jour le commentaire à la ligne 2 avec le nom de votre élément :

// FIX: Aligning the height of div (.REPLACE-ME)

Étape 4 (Optionnelle) : Publiez et testez

Ce script nécessite de calculer la hauteur réelle des éléments rendus par le navigateur. Par conséquent, l'effet ne sera visible que sur le site publié (ou dans l'aperçu local de Webflow, selon les cas), mais pas directement dans le canevas d'édition du Designer.