Bootstrap bien la misma altura

Uso la clase de arranque bien para la decoración. Tengo dos divs con diferentes cantidades de entradas dentro. ¿Es posible que ambos pozos llenen a sus padres y siempre tengan la misma altura sin importar cuántas entradas contengan?

Title
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Title
Item 1
Item 2
Item 3

Intenté diferentes soluciones pero no tuve éxito. Quiero evitar el diseño de cuadro flexible debido a su soporte débil. Si utilizo tablas en lugar de columnas bootstrap, obtengo el mismo resultado. ¿Cómo puedo manejar esto con CSS (y posiblemente sin agregar JavaScript)?

jsfiddle

JavaScript:

Si está de acuerdo con el uso de un poco de JavaScript, lo siguiente será exactamente lo que necesita:

 var elements = document.querySelectorAll(".well"), heights = []; /* Getting an array with the heights */ [].forEach.call(elements, function(each) { heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height"); }); /* Sorting the array to get the greatest value first */ heights.sort(function(a, b) { return parseFloat(b) - parseFloat(a); }); /* Applying the greatest height to each element */ [].forEach.call(elements, function(each) { each.style.height = heights[0]; }); 

jQuery:

Si, en cambio, buscas un código más corto y usas jQuery , puedes usar el siguiente código:

 var max; /* Getting the greatest height */ $(".well").each(function() { max = ($(this).height() > max) ? $(this).height() : max; }); /* Applying the greatest height to each element */ $(".well").height(max); 

Tiempos de ejecución:

  1. JavaScript: 0.562ms
  2. jQuery: 2.889ms (~ 5x más lento)

Aquí hay un fragmento que demuestra la solución:

 /* ----- JavaScript ----- */ var elements = document.querySelectorAll(".well"), heights = []; [].forEach.call(elements, function(each) { heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height"); }); heights.sort(function(a, b) { return parseFloat(b) - parseFloat(a); }); [].forEach.call(elements, function(each) { each.style.height = heights[0]; }); 
 /* ----- CSS ----- */ .well { border: 1px solid blue !important; } 
   
Title
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Title
Item 1
Item 2
Item 3

Puede establecer otra clase para los divs si tiene el valor de tamaño de altura exacto que desea que tenga:

 
Title
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Title
Item 1
Item 2
Item 3

Y, por ejemplo, si su valor de altura máxima es 300px (o puede ser de altura mínima):

 .test { height: 300px !important; } 

Será del mismo tamaño, jsFiddle

¡Pero! si quieres que sea de la misma altura, sin tener un valor de altura fijo, entonces creo que necesitarías usar javascript para obtener la altura de divs más grande.

Tome un ejemplo aquí:

¿Cómo establecer la altura del elemento para que coincida con la altura de otro elemento?

Hay un fragmento muy rápido que hice para ti usando jQuery, está bastante mal, estoy seguro de que hay maneras mejores y más cortas:

 var max = 0; $.each( $('.row > div > div'), function(i, row) { var cheight = $(row).height(); if (cheight > max) { max = cheight; } }) $.each( $('.row > div > div'), function(i, row) { $(row).height(max); }) 

JsLuego aquí

Yo uso esta solución para ese problema

Sin JavaScript

Lo encontré en este enlace .

 
//Your well code

ACTUALIZAR

y agrega este css:

 .row-flex, .row-flex > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:1 1 auto; } .row-flex-wrap { -webkit-flex-flow: row wrap; align-content: flex-start; flex:0; } .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { margin:-.2px; /* hack adjust for wrapping */ } .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div { width:100%; } .flex-col { display: flex; display: -webkit-flex; flex: 1 100%; flex-flow: column nowrap; } .flex-grow { display: flex; -webkit-flex: 2; flex: 2; } 

Espero que esto sea útil.

Aquí está la respuesta con jQuery https://jsfiddle.net/mjgLufa1/1/

 var maxHeight = 0; $(".row").each(function() { if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); $(".well ").height(maxHeight); 
  .well{ border: 1px solid red !important; } 
      
Title
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Title
Item 1
Item 2
Item 3
Item 3
Item 3
Item 3

Intenta usar .row-eq-height .

 
...

Tenga en cuenta este ejemplo: http://getbootstrap.com.vn/examples/equal-height-columns/

Puede ser útil en tu caso.