कंटेनर की ऊंचाई पर कंटेनर div की ऊंचाई पर नेस्टेड div को खींचें: ऑटो?

Question

मेरे पास एक कंटेनर div और दो नेस्टेड divs हैं। मेरे पास इनमें से किसी भी नेस्टेड divs की सामग्री पर नियंत्रण नहीं है।

मुझे दो आवश्यक नेस्टेड divs हमेशा एक ही ऊंचाई बनाने के लिए आवश्यक है। मुझे लगा कि यह कंटेनर div ऊंचाई देकर हासिल किया जा सकता है: ऑटो ताकि वह दो घोंसले वाले divs (जिनमें से प्रत्येक अपनी सामग्री को फिट करने के लिए फैला हुआ हो) की सबसे ऊंची ऊंचाई तक अपनी ऊंचाई बढ़ाएगा, और फिर अन्य घोंसला वाला div खिंचाव फैलाएगा कंटेनर की ऊंचाई का 100% तक।

यहाँ मैं क्या करने की कोशिश की है:

शैली:

#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> 

लेकिन यह काम नहीं करता। कंटेनर सबसे लंबे div (इस मामले में "बाएं" फिट करने के लिए फैला हुआ है) लेकिन छोटे नेस्टेड div ("दाएं") खुद को फैला नहीं है।

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

वहाँ किसी भी तरह से मैं इस टेबल का सहारा के बिना काम करने के लिए प्राप्त कर सकते हैं है:

हालांकि, ध्यान दें कि यह काम करता है अगर मैं कंटेनर में किसी विशिष्ट ऊंचाई दे सकता है?

Answer 1

महत्वपूर्ण नोट यह है कि थोड़ी देर पहले ऊंचाई के लिए प्रतिशत मूल्य घटाया गया था। तो आपको एक और पैटर्न का उपयोग करना होगा।

अधिकांश समय (विशेष रूप से आपके मामले में) पैनल की ऊंचाई स्वचालित रूप से सेट होती है। तो यह

<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> 

टिप्पणी उस मामले onyour राइट के स्थान पर और वाम आधार बदलने के एक छोटे से जावास्क्रिप्ट के साथ ऊंचाई बढ़ाने के लिए बेहतर है।

Answer 2

ऐसा करने के दो सबसे आम तरीके हैं Faux Columns छवियों का उपयोग करके या ऊंचाई को जावास्क्रिप्ट के साथ समान मानों पर सेट करना। मैंने दूसरी तकनीक, Equalizing Column Heights with jQuery प्रदर्शित करने के लिए एक स्क्रीनकास्ट किया। तकनीक को अन्य पुस्तकालयों या सादे जावास्क्रिप्ट के लिए आसानी से अनुकूलित किया जा सकता है।