2012-05-05 40 views
9

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.¿Cómo establecer la altura del elemento para que coincida con la altura de otro elemento?

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.

Respuesta

12

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()); 
}); 
+0

Gracias por la respuesta. ¿Me puede dar algunos consejos para esto? Nunca he escrito JavaScript para hacer algo como esto antes (y tengo una experiencia bastante limitada con JavaScript). – Jordan

+0

Su mejor opción sería utilizar una biblioteca como jQuery ya que vanilla JS puede ser un poco abrumador. Con jQuery, desearía algo como esto: '$ (". Flight_no, .price "). Css (" height ", $ (". Legs "). Height());' – Chords

+0

Aquí hay un jsfiddle para que pueda ver en acción: http://jsfiddle.net/Jyu94/ Intenta borrar el código del panel de Javascript y verás lo que publicaste originalmente. – Chords

1

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.

+0

En su demostración, si reduce la altura de la vista (produciendo una barra de desplazamiento vertical), las columnas exteriores se muestran como más cortas que la columna del medio. – Jake

Cuestiones relacionadas