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

Question

Actualmente tengo dos columnas, con otra columna entre ellas. Lo que quiero es que las columnas izquierda y derecha se extiendan en altura, ya que la columna central tiene más contenido agregado.

Algo a tener en cuenta es que no puedo establecer una altura exacta para el div principal y luego tengo las columnas izquierda y derecha establecidas en "altura: 100%". Esto se debe a que solo puede haber una pequeña cantidad de contenido en la columna central, o mucho.

Answer 1

Parece que tendrá que implementar un enfoque de Javascript. La forma en que lo haría sería tomar la altura de .legs y luego aplicarlo a .flight_no y .price.

La única otra opción que se me ocurre sería la de "fingir" por una imagen de fondo que incluiría dar .flight sin embargo sus columnas izquierda y derecha tienen un estilo diferente, entonces repeat-y en su CSS. Si haces eso, las barras laterales no tendrían que abarcar la misma altura.

Algo así, usando jQuery, establecerá dinámicamente las barras laterales a la altura de la columna del medio.

$(document).ready(function() { 
    $(".flight_no, .price").css("height", $(".legs").height()); 
}); 

Answer 2

div La extensión a la altura correcta, o digamos que la altura del 100% del depósito, usted tiene que height:100% cadena hasta el recipiente con altura fija o al cuerpo con otro height: 100%;. A largo plazo, probablemente requiera esta solución.

Como no hay una altura fija, usé height: 100% y encadené al cuerpo un html.

body, html { height: 100%; } 
.flight 
{ 
    float: right; 
    border: 1px solid green; 
    height: 100%; 
} 

Demo

para dar altura exacta del contenedor para las barras laterales, que o bien tiene que usar altura fija o usar javascript.