अभिभावक div बच्चों की ऊंचाई में विस्तार नहीं कर रहा है

Question

जैसा कि आप देखेंगे, मेरे पास div (#innerPageWrapper) है जो सामग्री वाले divs के चारों ओर लपेटता है। #innerPageWrapper भी लेआउट में अर्द्ध पारदर्शी सीमा के रूप में दृष्टि से कार्य करता है।

मेरी समस्या यह है कि #innerPageWrapper बच्चों के अंदर फिट करने के लिए विस्तारित नहीं होगा, अकेले ही शेष पृष्ठ को भरने के लिए विस्तार करें।

इस के लिए #innerPageWrapper

#innerPageWrapper { 
    width: 1100px; 
    height: 100%; 
    display: inline-block; 
    padding: 0 50px 0 50px; 
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top; 
    -webkit-border-top-left-radius: 20px; 
    -webkit-border-top-right-radius: 20px; 
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-topright: 20px; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

कोड मैं बहुत सी बातें (calc() div ऊंचाइयों के लिए का उपयोग कर सहित) की कोशिश की है असफल है। मैं jQuery का उपयोग करने से बचना चाहता हूँ।

Answer 1

सबसे पहले, आप अपने मामले में height:100%; जो उपयोग कर रहे हैं गलत है। height:100% का उपयोग न करने के बारे में एक स्पष्टीकरण के लिए, this आलेख देखें;

को समझने के लिए क्यों, आप समझते हैं कि कैसे ब्राउज़रों व्याख्या ऊंचाई और चौड़ाई की जरूरत है। वेब ब्राउज़र कुल उपलब्ध चौड़ाई को के रूप में गणना करते हैं कि ब्राउज़र विंडो कितनी व्यापक है। यदि आप अपने दस्तावेज़ों पर किसी भी चौड़ाई मान सेट नहीं करते हैं, तो ब्राउज़र स्वचालित रूप से विंडो की पूरी चौड़ाई को भरने के लिए सामग्री को प्रवाह करेगा।

लेकिन ऊंचाई की गणना अलग-अलग होती है। वास्तव में, ब्राउज़र ऊंचाई का मूल्यांकन नहीं करते हैं जब तक सामग्री इतनी लंबी न हो कि यह व्यू पोर्ट (इस प्रकार स्क्रॉल बार की आवश्यकता होती है) के बाहर हो या यदि वेब डिज़ाइनर पृष्ठ पर किसी तत्व पर एक पूर्ण ऊंचाई सेट करता है। अन्यथा, ब्राउज़र बस तक दृश्य पोर्ट की चौड़ाई के भीतर सामग्री प्रवाह को अंत में आता है। ऊंचाई की गणना बिल्कुल नहीं की जाती है। समस्या तब होती है जब आप किसी तत्व पर प्रतिशत ऊंचाई निर्धारित करते हैं जो पैरेंट तत्वों की ऊँचाई सेट नहीं है। दूसरे शब्दों में, मूल तत्व में डिफ़ॉल्ट ऊंचाई है: ऑटो; असल में, एक अपरिभाषित मान से ऊंचाई की गणना करने के लिए आप ब्राउज़र से पूछ रहे हैं। चूंकि यह बराबर मूल्य के बराबर होगा, नतीजा यह है कि ब्राउज़र कुछ भी नहीं करता है।

दूसरे, बच्चे तत्वों के आसपास लपेटो, तो आप इस आवरण पर overflow:hidden का उपयोग करना चाहिए (इस मामले #innerPageWrapper में) बाहरी-div बनाने के लिए।

इस सफलतापूर्वक काम करने के लिए, अपने बच्चे तत्वों नहींposition:absolute होना चाहिए आप के लिए है के रूप में #contentMain और #contentSidebar, बजाय इन तैरता (नाव बनाने: छोड़ दिया और फ्लोट: सही) और #contentSidebar div बंद होने के बाद, फ्लोट को साफ़ करने के लिए <div style="clear:both"></div> जोड़ें, जिससे माता-पिता को पूरी तरह से चारों ओर लपेटने की अनुमति मिलती है।

मैंने this पेस्टबिन में आवश्यक सीएसएस रखा है, ध्यान दें कि ऊपर दिए गए अनुसार एक div का उपयोग करके आपको अपनी फ्लोट को साफ़ करना होगा।

Answer 2

मूल तत्व की चौड़ाई और ऊंचाई को ऑटो पर सेट करने का प्रयास करें। सरलीकृत उदाहरण:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper { 
    width:auto; 
    height:auto; 
    background:red; 
} 

#innerPageWrapper p{ 
    width: 100px; 
    height: auto; 
    margin: 10px auto; 
    background: yellow; 
} 

संपादित करें:

चेक एक और अधिक उन्नत उदाहरण के लिए इस बेला, क्षैतिज और ऊर्ध्वाधर सेंटर सहित: http://jsfiddle.net/kimgysen/8nWDE/1/

पेरेंट तत्व गतिशील अपना लेगा बाल तत्वों की सीमाओं के लिए।
आप बाल तत्वों पर गतिशील चौड़ाई और ऊंचाई भी सेट कर सकते हैं।

.outerDiv{ 
    display: table-cell; 
    background-color: yellow; 
    width: auto; 
    height: auto; 
    vertical-align: middle; 
    text-align: center; 
} 

.innerDiv{ 
    display: inline-block; 
    background-color: red; 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
}