Ecualizar alturas de contenedores con JavaScript

Vista prévia

Descripción

Con un poco de código JavaScript y CSS, puede igualar fácilmente las alturas de cualquier grupo de elementos HTML para crear un diseño web ordenado. Funciona bien con un diseño adaptable.

Funcionamiento

Cree un grupo de elementos de contenedor con diferentes alturas de contenido.

<div class="boxes">

<div> ... </div>

<div> ... </div>

<div> ... </div>
</div>

Estilo de los elementos del contenedor a través de CSS.

.boxes > * {

width: 200px;

float: left;

padding: 12px;

margin: 6px;

background: #707f8e;

box-sizing: border-box;

color: #fff;
}

El código JavaScript para hacer que los elementos del contenedor en los "cuadros" del contenedor tienen la misma altura.

function equalize(sel) {


var els = Array.prototype.slice.call(document.querySelectorAll(sel));


var row = [];

var max;

var top;


function setHeights() {


row.forEach(function(e) {



e.style.height = max + 'px';


});

}


for (var i=0; i < els.length; i++) {


var el = els[i];


el.style.height = 'auto';


if (el.offsetTop !== top) {



// new row detected



setHeights();



top = el.offsetTop;






max = 0;



row = [];


}


row.push(el);


max = Math.max(max, el.offsetHeight);

}

setHeights(); // last row
}

// you might want to use addEventListener instead!
window.onload = window.onresize = function() {

equalize('.boxes > *');
};