Konteynerin yüksekliği olduğunda, iç içe geçmiş div, kapsayıcı div yüksekliğine uzanır: auto?

Question

İçinde bir konteyner div ve iki yuvalanmış div var. İç içe geçmiş div'lardan birinin içeriği üzerinde kontrole sahip değilim.

Esasen ihtiyacım olan şey, iki iç içe geçmiş divun her zaman aynı yüksekliğe sahip olmasını sağlamaktır. Bunun, konteyner div yüksekliğini vererek elde edilebileceğini düşündüm: o, kendi boyunu iki yuvalanmış divun en uzağına (her biri kendi içeriğine uyacak şekilde uzanır) uzatır, ve sonra diğer yuvalanmış div gerilir konteynerin yüksekliğinin% 100'üne kadar.

İşte denedim ne:

Stil:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
} 

#left{ 
    float:left; 
    height:100%; 
    width:20%; 
    background-color:#F00; 
} 

#right{ 
    height:100%; 
    width:60%; 
    background-color:#0F3; 
} 

HTML:

<div id="container"> 

<div id="left"> 
    <p>Content</p> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

<div id="right"> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

</div> 

Ancak bu işe yaramaz. Kap, bu durumda en uzun div ("sol") uyacak şekilde uzanır, ancak daha kısa iç içe geçmiş div ("sağ") kendiliğinden gerilmez.

#container{ 
    background-color:#FF0; 
    overflow:auto; 
    height:300px; 
} 

bu tablolar başvurmadan işe bir yolu var mı:

Ancak, bu işi YAPAR ben haznesini belirli yükseklik verirsem?

Answer 1

Önemli Not, bir süre önce Yükseklikten Çıkarılan Yüzde Değeri yüzdesidir. Yani başka bir desen kullanmalısın.

Çoğu zaman (sizin durumunuza göre) panellerin yüksekliği otomatik olarak ayarlanır. Bu yüzden biraz javascript ile söz onyour Hakkının yeri ve Sol taban değiştirmek

<script> 
    function IncreaseHeight() 
    { 
     var first = Document.getElementById("Right").style.height; 
     var second = Document.getElementById("Left").style.height; 

     if(first < second) 
     Document.getElementById("Right").style.height = Document.getElementById("Left").style.height; 
     else 
     Document.getElementById("Left").style.height = Document.getElementById("Right").style.height; 
    } 
</script> 

notu yüksekliğini artırmak için daha iyidir.

Answer 2

Bunu yapmanın en yaygın iki yolu, resimleri kullanarak veya yükseklikleri JavaScript ile eşit değerlere ayarlayarak Faux Columns olur. İkinci tekniği, Equalizing Column Heights with jQuery göstermek için bir screencast yaptım. Teknik diğer kütüphaneler veya düz JavaScript için kolayca uyarlanabilir.