Égaliseur de hauteur pour Webflow (CSS)
Ce script harmonise automatiquement la hauteur de tous les éléments possédant la même classe CSS en se basant sur le plus grand d'entre eux. Il garantit un alignement visuel parfait, même si le contenu varie, et recalcule les dimensions en temps réel lors du redimensionnement de la fenêtre.
Ajoutez le script
Ajoutez ce bout de code dans le before </body> ou dans un embed code à l'intérieur de votre page.
<script>
// FIX: Egalisation hauteur des div (.votre-div)
window.addEventListener('load', function() {
function equalizeHeights() {
const elements = document.querySelectorAll('.votre-div'); // CHANGER ICI
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
if (el.offsetHeight > maxHeight) maxHeight = el.offsetHeight;
});
elements.forEach(el => el.style.height = maxHeight + 'px');
}
equalizeHeights();
// ajout delai pour la perf sur le resize
let timer;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(equalizeHeights, 100);
});
});
</script>Définissez l'élément concerné
Dans le code précédent, changez simplement "votre-div" par le nom exact de la classe CSS que vous voulez harmoniser.
// FIX: Egalisation hauteur des div (.votre-div)
window.addEventListener('load', function() {
function equalizeHeights() {
const elements = document.querySelectorAll('.votre-div'); // CHANGER ICI
if (elements.length === 0) return; elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
if (el.offsetHeight > maxHeight) maxHeight = el.offsetHeight;
}); elements.forEach(el => el.style.height = maxHeight + 'px');
} equalizeHeights();
// ajout delai pour la perf sur le resize
let timer;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(equalizeHeights, 100);
});
});
</script>
Veillez à garder le point "." avant le nom de votre classe CSS :
✅ .votre-div
❌ votre-div
La div à harmoniser est très souvent la div parent (celle qui contient les éléments ne faisant pas la même hauteur).
Testez
Testez la configuration directement dans le live preview de webflow avec l'option "enable custom code" activée.
Publiez
Publiez votre site pour que les modifications soient prises en compte.
C'est terminé !
