सीएसएस: एक केंद्रीय div की ऊंचाई को भरने के लिए क्या एक निश्चित ऊँचाई कंटेनर में बचा है

Question

क्षमा करें लोग विस्तार करें, यह एक और सीएसएस ऊंचाई "100%" (sortof) सवाल है ...

मैं इस तरह एक लेआउट है:

---------------. 
|Containing div | Containing div's height is FIXED 
| .-----------. |  (say 400px for simplicity) 
| |Inner div1 | | Inner div1 has height fixed (say 50px) 
| '-----------' | Inner div3 has static-but-unknown content, 
| .-----------. |  height not known at render time 
| |Inner  | | Inner Variable Div should expand to the rest 
| |Variable | |  of the space - i.e. I want to eliminate 
| |Div  | |  the "blank space" 
| '-----------' | 
| .-----------. | 
| |Inner div3 | | 
| |with fixed | | 
| |usercontent| | 
| '-----------' | 
| blank space | 
'---------------' 

यह है: एक कंटेनर डिव एक फिक्स्ड हेइट (400px कहें) के साथ। इसके अंदर कई divs, लंबवत ढेर: div1, परिवर्तनीय div, div3। उनमें से कम से कम एक (div3) में स्थैतिक-अज्ञात सामग्री है, इसलिए मैं बस सब कुछ पर पिक्सेल गणना की ऊंचाई को थप्पड़ मार नहीं सकता। आइए बहस के लिए कहें कि div1 + div3 कंटेनर डिव के भीतर फिट होगा।

मैं चर div कंटेनर डिव के 400px भीतर ऊंचाई के बाकी को भरने के लिए विस्तार करना चाहते हैं। लेकिन मैं इसकी ऊंचाई 100% के रूप में निर्दिष्ट नहीं कर सकता क्योंकि यह उस टुकड़े को अनदेखा करता है जो अन्य आंतरिक divs की आवश्यकता होती है, और कंटेनर डिव को बहती है।

यह यहां पर सबसे अधिक सीएसएस-ऊंचाई टैग किए गए प्रश्नों के लिए अलग है, लेकिन CSS div height won't expand और Fixed parent container height, child to expand/be-limited-to parent container संबंधित हो सकता है।

यदि संभव हो तो मैं एक शुद्ध सीएसएस समाधान के बाद हूं। मैं ठीक हूं इसके साथ ही एफएफ/वेबकिट/हाल ही में आईई में काम कर रहा हूं।

Answer 1

वहाँ शुद्ध सीएसएस में यह करने के लिए एक तरह से होना करने के लिए और अभी भी सभी तत्वों पर अलग पृष्ठभूमि है नहीं मालूम था। तो मैंने थोड़ा जावास्क्रिप्ट का उपयोग करने का सहारा लिया।

आवेदन के बारे में उत्सुक उन: मैं जादू की मॉक-अप बनाने के लिए सीएसएस का उपयोग कर रहा: सभा कार्ड। इस मामले में, मैं टोकन बना रहा हूं: http://www.magicmultiverse.net/cards/52371 और http://www.magicmultiverse.net/cards/44771the officialequivalents के साथ तुलना करें। मैं टेक्स्ट बॉक्स को जितना बड़ा होना चाहता था उतना बड़ा आकार देना चाहता था।और मैं बड़े घुमावदार बॉक्स में पीछे की अनुमति देने जा रहा हूं। तो यह जावास्क्रिप्ट था।

Answer 2

यह उत्तर केवल कार्य करेगा जब आप "आंतरिक चर डिव" पर एक background डाल करने के लिए की जरूरत नहीं है:

Live Demo

सीएसएस:

#container { 
    background: #ccc; 
    height: 400px; 
    width: 300px; 

    position: relative 
} 
#div1 { 
    background: #999; 
    height: 50px 
} 

#content { 
    background: #ddd; 
    overflow: hidden 
} 
#div3 { 
    background: #999; 
    position: absolute; 
    bottom: 0; 
    width: 100% 
} 

HTML:

<div id="container"> 
    <div id="div1">I'm 50px.</div> 

    <div id="content">I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br /></div> 

    <div id="div3">I'm unknown.<br />A<br />B<br />C</div> 
</div> 

Answer 3

यह कम से कम मेरे दिमाग में div3 द्वारा परिवर्तनीय ऊंचाई होने के कारण जटिल बना दिया गया है।

इसी तरह के समाधानों का उपयोग मैंने आमतौर पर एक स्थिर ऊंचाई का अंतिम div होना है और फिर अंतिम div की ऊंचाई के बराबर 100% और नीचे पैडिंग का संयोजन करके केंद्रीय सामग्री को उचित रूप से विस्तारित करने की अनुमति दी है ।

आप एक div कि (रैपिंग div जा रहा है स्थिति रिश्तेदार के साथ) कि div के भीतर चर div और भीतरी DIV3 और तब स्थिति पूर्ण नीचे DIV3 लपेटता पर इस तकनीक का इस्तेमाल कर सकते हैं - लेकिन तब मुझे विश्वास है कि ब्राउज़र/छोटे संकल्प का आकार बदलने या सामग्री combos div3 को आंतरिक चर div या इसके विपरीत ओवरलैप करने का कारण बन सकता है; मुझे लगता है कि कम से कम आपको जवाब के करीब मिल जाएगा।

---

यह दुर्भाग्य से jQuery के डैश का उपयोग करके सबसे अच्छा समाधान हो सकता है।

http://jsfiddle.net/G7fys/1/