[SOLUCIONADO] Bootstrap: ajustar el height al height de la columna más alta

[schattenburg]

Buenos días:

Estoy intentando hacer mediante CSS de Bootstrap que el tamaño del height de todas las columnas sea siempre el mismo, aunque algunas de ellas tenga mucho menos contenido q otras.

Mi código es el siguiente:

Código HTML:

<style>
 .rojo { background-color:#FF0000; height:200px; }
 .azul { background-color:#2C2961; }
 .verde { background-color:#036C19; }
 </style>
 
<div class="row">
    <div class="col-md-4 rojo">
        En un lugar de la mancha<br>
    </div>
    <div class="col-md-4 azul">
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
    </div>
    <div class="col-md-4 verde">
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
    </div>
</div>
 

He probado mediante CSS ajustar el height de diferentes maneras pero nada. Cada columna muestra el height que tiene, ¿cómo puedo hacer que el height de todas las columnas sea el mismo y que éste sea el de la columna con height más alto?

Muchas gracias

[pzin]

Imita el comportamiento de una tabla y celdas con table y table-cell:

Código CSS:

div.row {
  display: table;
}
 
div.col-md-4 {
  display: table-cell;
}
 

Con eso debería de ser suficiente.

No puedes usar nada del tipo height: 100% ya que la altura del contenedor principal es auto (valor por defecto).

[schattenburg]

Me autorespondo a mí mismo. Ya encontré una solución. Lo pongo aquí por si alguien le viene bien:

Código HTML:

<div class="row">
    <div class="col-md-4 rojo well">
        En un lugar de la mancha<br>
    </div>
    <div class="col-md-4 azul well">
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
    </div>
    <div class="col-md-4 verde well">
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
        En un lugar de la mancha<br>
    </div>
</div>
 
<script>
$(document).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),
 
    maxHeight = Math.max.apply(null, heights);
 
    $(".well").height(maxHeight);
});
</script>
 

[pzin]

Acostúmbrate a usar la opción highlight para cuando publiques código.

Intenta usar lo que te dije en mi respuesta, no tienes realmente necesidad de usar JavaScript y mucho menos jQuery.

[schattenburg]

Gracias por el consejo de usar hightlight. Lo haré siempre a partir de ahora.

Pues probé en su momento lo tuyo con table-cell pero no me funcionó. El código que puse fue:

Código CSS:

div .row {
  display: table;
}
 
div .col-md-4 {
  display: table-cell;
}
 

Pero nada, cada celda sigue con sus propias alturas, por lo que al final lo hice con ese pequeño JQuery.

Muchas gracias por todo

[schattenburg]

Ya conseguí que funcionase con CSS en vez de JQuery. Dejo aquí el código por si le puede servir a alguien en el futuro:

Código CSS:

.col-md-4 {
    display: table-cell;
    float: none; 
}
 

[pzin]

Justamente. Cuando flotas un elemento es computado como un elemento de bloque, así que, técnicamente, el valor de display es tomado como block.

[diegorobh]

Buen día schattenburg, te agradezco mucho las soluciones que has publicado, ya que estaba en busca de una respuesta.

La respuesta que encontraste en css hace que la distribución de las columnas deje de adaptarse a diversos tamaños de pantalla, presentándose de esta manera el mismo número de columnas tanto en un celular, como en un pc.

Por otro lado, la de Javascript si permite dicha adaptación, pero cuando estás en dispositivos de pantalla muy chica, y solo requieres de una columna, si tienes una diferencia importante entre el contenido de cada una de las columnas y a todas se les asigna el heigth de la columna con mayor contenido; sobrará demasiado espacio y en un celular el sitio no se vería bien.

Mi pregunta es: ¿como podrías completar el código js para que si el width de la pantalla es menor a 768px, ya no se utilice la clase well, se borre, o en otras palabras, el height de los contenedores se vuelva a comportar como estaba por defecto?

Te agradezco nuevamente, creo que si se soluciona lo anterior ya el sitio web quedaría totalmente responsive.

Saludos.

[pzin]

Iniciado por diegorobh

La respuesta que encontraste en css hace que la distribución de las columnas deje de adaptarse a diversos tamaños de pantalla, presentándose de esta manera el mismo número de columnas tanto en un celular, como en un pc.

Usando media-queries puedes cambiar el comportamiento de esas columnas a tal o cual tamaño de pantalla.