Öğenin yüksekliğini, başka bir öğenin yüksekliğine uydurmak nasıl ayarlanır?

Question

Şu anda iki sütun var, aralarında başka bir sütun var. İstediğim şey, orta sütunun kendisine daha fazla içerik ekledikçe, sol ve sağ sütunların yüksekliğe sahip olması.

Dikkat edilmesi gereken bir şey, ebeveyn div için tam bir yükseklik ayarlayamamam ve sol ve sağ sütunların "height: 100%" olarak ayarlanmış olmasıdır. Bunun nedeni, orta sütunda çok az miktarda içeriğin olabileceği veya çok fazla olabileceğidir.

Answer 1

Javascript yaklaşımı uygulamak zorunda kalacaksınız gibi görünüyor. Bunun için gideceğim yol .legs'un yüksekliğini almak ve sonra .flight_no ve .price'a uygulamak olacaktır.

Düşünebildiğim tek diğer seçenek, .flight vererek sol ve sağ sütunlarınızın stilistik olarak farklı olmasını, ardından da CSS'nizde repeat-y göstermesini sağlayan bir arka plan görüntüsü vererek "sahte" olacaktır. Bunu yaparsanız, kenar çubukları aslında aynı yüksekliğe sahip olmaz.

JQuery'yi kullanarak böyle bir şey, kenar çubuklarınızı dinamik olarak orta sütunun yüksekliğine ayarlayacaktır.

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

Answer 2

genişletme div yüksekliğini düzeltmek veya kabın% 100 yüksekliği, başka height: 100%; ile sabit yüksekliği ile kaba yukarı veya vücuda zincire height:100% gerektiğini söylüyorlar olanak veriyor. Uzun vadede, muhtemelen bu çözümü gerektirir.

Sabit yükseklik olmadığından, height: 100% kullandı ve gövdeye bir html zincirleme yaptım.

Demo

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

Eğer sabit bir yükseklik kullanmak veya javascript kullanmak zorunda ya sidebars için kabın kesin yüksekliğini vermek İÇİN.