Igualar alturas

Ancho pantalla:

Limite de ajuste automático de contenedores en un ancho de 768px configurable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper bibendum neque a semper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper bibendum neque a semper. Curabitur ultricies volutpat purus,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper bibendum neque a semper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper bibendum neque a semper. Curabitur ultricies volutpat purus, eu feugiat tellus bibendum et. Etiam sodales lectus eu rhoncus venenatis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis tellus in ultricies tempor. Fusce nulla est, feugiat vitae ullamcorper nec, euismod a neque. Vivamus ullamcorper bibendum neque a semper.


Instrucciones

Engraba los divs del mismo nivel que quieras igualar en alturas en un div con clase "igualarAlt"

                        
<div class="igualarAlt">
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
</div>
...
<div class="igualarAlt">
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
</div>
                        
                    

De esta forma todos los "div" de dentro se igualarán en altura. Puedes repetir este proceso en otros contenedores del mismo documento.

Incluye el codigo javascript:

                        
window.addEventListener('load', inicio, false)

function IgualarAlturas(ele, opc) {

    this.el = ele;
    opciones = opc;

    this.igualar = function() {

        if (window.innerWidth > opciones.limite) {

            for (var i = 0; i < this.el.children.length; i++) {
                this.el.children[i].style.height = 'auto';
            }

            var arAlturas = [];

            for (var i = 0; i < this.el.children.length; i++) {
                
                arAlturas.push(this.el.children[i].offsetHeight)

            }
            var alturaMayor = Math.max.apply(null, arAlturas)

            for (var i = 0; i < this.el.children.length; i++) {


                this.el.children[i].style.height = alturaMayor + 'px';
            }

            console.log(arAlturas)
            console.log(alturaMayor)


        } else {

             for (var i = 0; i < this.el.children.length; i++) {
                this.el.children[i].style.height = 'auto';
            }
        }
    }
}

function inicio() {

    var n = document.querySelectorAll('.igualarAlt');

    for (var i = 0; i < n.length; i++) {
        
        var alturasIguales = new IgualarAlturas(n[i], {

            limite: 768
        });

        alturasIguales.igualar()
    }
}

window.addEventListener("resize", function() {
    inicio()
});

                        
                    
Copiar código

Desarrollado por Luis Cornejo