पूर्ण स्थानित बच्चे div पैरेंट फिट करने के लिए फैलता है?

Question

वैसे भी एक पूर्ण स्थान के बच्चे के लिए अपने रिश्तेदार स्थित माता-पिता को भरने के लिए विस्तार करना है? (अभिभावक की ऊंचाई तय नहीं है) यहां मैंने जो किया है और यह फ़ायरफ़ॉक्स और आईई 7 के साथ ठीक काम कर रहा है लेकिन आईई 6 नहीं। :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

तो मुझे याद है सही ढंग से वहाँ के साथ कैसे IE6 div ऊंचाई संभालती एक बग है। यह केवल ऊंचाई के भीतर सामग्री शामिल करने के लिए जब ऊंचाई 100% पर सेट किया जाता है की जरूरत के लिए div पैदा करेगा। मैं करूंगा दो दृष्टिकोण की सिफारिश:

1. IE6 के समर्थन के बारे में चिंता मत करो के रूप में यह एक मरे हुए फिर भी ब्राउज़र है
2. कि, काम नहीं करता है jQuery की तरह कुछ का उपयोग माता पिता div की ऊंचाई प्राप्त करने के लिए और फिर सेट उस ऊंचाई पर बच्चे div।
3. बैकग्रो सेट करके इसे नकली अंडे एक ही रंग के लिए हैं, इसलिए कोई भी अंतर

Answer 2

आप इसे बच्चे के शीर्ष और निचले गुण दोनों सेट करने के साथ प्राप्त कर सकते हैं।

See how this is done

है कि लेख के नीचे, वहाँ डीन एडवर्ड्स IE7 (और IE8) js लाइब्रेरी का लिंक है कि आप IE6 आगंतुकों के लिए शामिल होना चाहिए है। यह एक जेएस लाइब्रेरी है जो वास्तव में IE6 (या 8) की तरह व्यवहार करती है जब आप इसे शामिल करते हैं। मिठाई!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

जहाँ तक मुझे पता है, वहाँ एक बिल्कुल तैनात चाइल्ड तत्व चारों ओर एक माता पिता के तत्व का विस्तार का कोई रास्ता नहीं है। बच्चे के तत्व को पूरी तरह से तैनात करके आप इसे पेज आइटम के नियमित प्रवाह से हटा रहे हैं।

मैंने हाल ही में एक 2-कॉलम वेबसाइट बनाई है जहां सही कॉलम बिल्कुल स्थित था लेकिन बाएं कॉलम नहीं था। यदि बाएं कॉलम में कम कॉलम की तुलना में कम सामग्री और छोटी ऊंचाई थी, तो पृष्ठ सही कॉलम को काट देगा क्योंकि यह पूरी तरह से स्थित था।

इसे हल करने के लिए, मुझे यह निर्धारित करना था कि दाएं कॉलम की ऊंचाई बाएं कॉलम की ऊंचाई से अधिक थी और यदि पैरेंट div ऊंचाई की ऊंचाई दोनों में से अधिक से अधिक हो।

यहां मेरा jQuery समाधान है। मैं एक कोडर का अधिक नहीं हूं इसलिए इसे ट्विक करने में संकोच न करें:

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

यह आसान है। चाल एक ही समय

पर top: 0px और bottom: 0px स्थापित कर रही है यहाँ काम कर कोड

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

आइटम नंबर एक के लिए यहाँ http://jsfiddle.net/Qexhh/