Aprende a hacer que todos los div dentro de una fila (incluso con Bootstrap) tengan la misma altura automáticamente.

Todo desarrollador web se enfrentará algún día a la increíble tarea de trabajar con columnas en un diseño con contenido diferente. Quiero decir, siempre vemos plantillas increíbles que encontramos en fragmentos y demostraciones en Internet y simplemente se ven increíblemente simétricas (sin embargo, solo con el mismo contenido):

Div Columns Same Height

Pero cuando usamos la plantilla y simplemente ponemos algo de contenido dinámico, generado por algún lenguaje del lado del servidor:

Asymetrical div column jquery

No parece tan simétrico en absoluto, ¿no?

Te preguntarás, ¿por qué no usar CSS para esta tarea? Bueno, la respuesta es bastante simple, crear columnas robustas y receptivas de igual altura para contenido arbitrario es difícil o casi imposible de hacer solo con CSS (al menos sin hacks o engaños, de una manera compatible con versiones anteriores, sí, estamos hablando de usted IE9) . Esta tarea debe realizarse usando Javascript (o con jQuery), sin embargo, tenga en cuenta que probablemente debería asegurarse de que su diseño aún sea utilizable para el usuario (recuerde que puede ser alguien con JavaScript desactivado).

Si decides hacer un pequeño guión para lograr lo que deseas, es posible que estés pensando en algo similar a:

Nota: no use el siguiente fragmento porque es demasiado básico, es solo un ejemplo de la explicación de cómo podría funcionar la lógica.

(function( $ ) {
    // las funciones sameHeight hacen que todos los elementos seleccionados tengan la misma altura
    $.fn.sameHeight = function() {
        var selector = this;
        var heights = [];

        // Guarde las alturas de cada elemento en una matriz
        selector.each(function(){
            var height = $(this).height();
            heights.push(height);
        });

        // Consigue la mayor altura
        var maxHeight = Math.max.apply(null, heights);
        // Mostrar en la consola para verificar
        console.log(heights,maxHeight);

        // Establezca maxHeight para cada elemento seleccionado
        selector.each(function(){
            $(this).height(maxHeight);
        }); 
    };
 
}( jQuery ));

Eso debería crear el método sameHeight como un complemento de jQuery, por lo que podemos usarlo como:

$('.my-selector').sameHeight();

$(window).resize(function(){
    // Hazlo cuando la ventana también cambie de tamaño
    $('.my-selector').sameHeight();
});

Pero no te recomendamos que lo hagas tú mismo o usando el fragmento anterior , tomará mucho tiempo hacer las pruebas, en su lugar te recomendamos que uses una biblioteca para esto, como se muestra en la siguiente área.

Implementación

Demasiadas cosas de las que preocuparse si quiere hacerlo usted mismo y muchas pruebas para ejecutar si quiere estar seguro de que su propia implementación realmente funciona. No reinvente la rueda y use una biblioteca para que sea fácil, funcional y correcto. En este caso, le recomendamos que utilice jquery.matchheight para lograr su objetivo. Hay muchos complementos de jQuery que prometen un script completo para hacer que sus divs tengan la misma altura en todos los navegadores, sin embargo, la mayoría de ellos fallan, no porque el usuario use un navegador antiguo, pero no implementan su algoritmo. a los elementos cuando las ventanas cambian de tamaño, porque estás usando elementos flotantes dentro de una fila u otro tipo de eventos como la modificación del DOM.

MatchHeight hará que la altura de todos los elementos seleccionados sea exactamente igual mediante el uso de un selector simple y una función de inicialización. Puede ver una demostración de MatchHeight en esta página o visitar directamente el repositorio en Github para obtener una copia de la biblioteca . Las principales características de MatchHeight son:

  • coincide automáticamente con las alturas de los grupos de elementos.
  • utilice la altura máxima o defina un elemento objetivo específico.
  • en cualquier lugar de la página y en cualquier lugar del DOM.
  • receptivo (actualizaciones en el evento de cambio de tamaño de la ventana).
  • fila consciente (maneja elementos flotantes y envoltura).
  • representa box-sizingy se mezcló paddingmarginbordervalores.
  • maneja imágenes y otros medios (actualizaciones después de la carga).
  • admite elementos ocultos o no visibles (por ejemplo, los que están dentro de los controles de pestañas).
  • acelerado para equilibrar el rendimiento y la suavidad.
  • se quita fácilmente cuando sea necesario.
  • mantener la posición de desplazamiento.
  • API de atributos de datos.
  • eventos de devolución de llamada.
  • probado en IE8 +, Chrome, Firefox, Chrome Android.

Para comenzar, obtenga una copia de la biblioteca de altura de coincidencia en el repositorio de Github o agregue el proyecto como una dependencia en NPM:

npm install jquery-match-height

O con Bower:

bower install matchheight

Finalmente, incluya la biblioteca con una etiqueta de script en su documento (tenga en cuenta que jQuery debe incluirse antes):

<script src="jquery.matchHeight.js" type="text/javascript"></script>

Y luego podrá utilizar la biblioteca matchHeight. Puede usar MatchHeight con jQuery o usando la API de atributos de datos:

Inicialización de jQuery

Para nuestro marcado, estamos usando bootstrap:

<div class="row">
    <div class="col-md-4 article" style="background-color:yellow;">
        <h2>Article Title</h2>
        <p>Hello <br> This has <br> a different height</p>
    </div>
    <div class="col-md-4 article" style="background-color:blue;">
        <h2>Article Title</h2>
        <p>Hello <br><br><br>This is not what it <br>looks like</p>
    </div>
    <div class="col-md-4 article" style="background-color:violet;">
        <h2>Article Title</h2>
        <p>Hello<br><br><br><br><br><br><br><br><br><br><br>a different height</p>
    </div>
</div>

3 columnas con diferente altura, para que todas tengan la misma altura, inicializa matchHeight con jQuery (seleccionando los 3 elementos con la clase de artículo):

$(".article").matchHeight();

Y ya no tienes que preocuparte por si tus elementos tienen la misma altura, ya que matchHeight se encargará de todo automáticamente. El método matchHeight, puedes recibir como primer parámetro un objeto con 4 propiedades:

$(".article").matchHeight({
    byRow: true,
    property: 'height',
    target: null,
    remove: false
});
  • byRowes trueo falsepara habilitar la detección de filas
  • propertyes el nombre de la propiedad CSS que se va a establecer (por ejemplo, 'height'o 'min-height')
  • target es un elemento opcional para usar en lugar del elemento con altura máxima
  • removees trueo falsepara eliminar enlaces anteriores en lugar de aplicar nuevos

API de atributos de datos

Puede inicializar automáticamente la biblioteca utilizando atributos de datos, por ejemplo, data-mh="group-name"donde nombre de grupo es una cadena arbitraria para identificar qué elementos deben considerarse como un grupo (una especie de identificación de grupo).

<div class="row">
    <div class="col-md-4" style="background-color:yellow;" data-mh="article-group">
        <h2>Article Title</h2>
        <p>Hello <br> This has <br> a different height</p>
    </div>
    <div class="col-md-4" style="background-color:blue;" data-mh="article-group">
        <h2>Article Title</h2>
        <p>Hello <br><br><br>This is not what it <br>looks like</p>
    </div>
    <div class="col-md-4" style="background-color:violet;" data-mh="article-group">
        <h2>Article Title</h2>
        <p>Hello<br><br><br><br><br><br><br><br><br><br><br>a different height</p>
    </div>
</div>

<div class="row">
    <div class="col-md-4" style="background-color:yellow;" data-mh="blog-group">
        <h2>Blog Title</h2>
        <p>Hello <br> This has <br> a different height</p>
    </div>
    <div class="col-md-4" style="background-color:blue;" data-mh="blog-group">
        <h2>Blog Title</h2>
        <p>Hello <br><br><br>This is not what it <br>looks like</p>
    </div>
    <div class="col-md-4" style="background-color:violet;" data-mh="blog-group">
        <h2>Blog Title</h2>
        <p>Hello<br><br><br><br><br><br><br><br><br><br><br>a different height</p>
    </div>
</div>

Todos los elementos con el mismo nombre de grupo se establecerán a la misma altura cuando se cargue la página, independientemente de su posición en el DOM, sin necesidad de ningún código adicional.

Tenga en cuenta que byRowse habilitará al usar la API de datos, si no desea esto (o requiere otras opciones), use el método alternativo (con jQuery).

Con el uso de cualquiera de los métodos mencionados anteriormente, debería ver un diseño simétrico con sus columnas usando jQuery:

Same Height Match Height jQuery plugin

Métodos auxiliares

Si desea trabajar con esta biblioteca y desea conocerla a fondo, hay un par de métodos que vale la pena mencionar:

Activar evento de actualización

Si ya ha inicializado matchHeight en elementos, y por alguna razón necesita actualizar el método de ajuste, por ejemplo, si ha modificado algún contenido, puede hacerlo usando:

$.fn.matchHeight._update()

Eventos de devolución de llamada

Dado que matchHeight maneja automáticamente la actualización del diseño después de ciertos eventos de ventana, puede proporcionar funciones como devoluciones de llamada globales si necesita ser notificado:

$.fn.matchHeight._beforeUpdate = function(event, groups) {
    // do something before any updates are applied
}

$.fn.matchHeight._afterUpdate = function(event, groups) {
    // do something after all updates are applied
}

Si necesita más información, visite el uso avanzado en el repositorio de Github aquí.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores