पूर्ण बच्चे डीआईवी

Question

की चौड़ाई का उत्तराधिकारी करने के लिए रिश्तेदार माता-पिता डीआईवी मैं माता-पिता डीआईवी के नीचे एक बच्चे डीआईवी को स्थापित करने की कोशिश कर रहा हूं, लेकिन मैं बच्चे डीवी की सामग्री को माता-पिता डीवी के आयामों को निर्देशित करने में मदद करने के लिए भी पसंद करूंगा । जैसा कि मेरे पास अभी है, बच्चा डीआईवी माता-पिता डीआईवी की चौड़ाई/ऊंचाई को प्रभावित नहीं करता है।

यहाँ मेरी HTML/CSS कोड का एक नमूना है:

// एचटीएमएल कोड:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"></div> 
</div> 

// सीएसएस कोड:

#parent { 
    background-color:#222; 
    position: relative; 
    height: 500px; 
} 
#child { 
    background-color:#444; 
    position: absolute; 
    bottom: 0px; 
    width: 100px; 
    height: 200px; 
} 

क्या मैं इसे करने की आवश्यकता है मैं क्या करने की कोशिश कर रहा हूँ प्राप्त करें? मैं पूर्ण/सापेक्ष सीएसएस नियमों को छोड़ सकता हूं और केवल मूल डीआईवी के भीतर एक टेबल बना सकता हूं जो मुझे नीचे के संरेखण और सामग्री दोनों को प्राप्त करने की अनुमति देगा जो माता-पिता के आयामों को निर्देशित करता है।

हालांकि, मैं जानना चाहता हूं कि सीएसएस में ऐसा करने का कोई तरीका है और माता-पिता DIV की चौड़ाई निर्धारित किए बिना।

अग्रिम धन्यवाद!

Answer 1

संक्षिप्त उत्तर यह है कि आप जो मूल रूप से पूछ रहे हैं वह शुद्ध सीएसएस/एचटीएमएल के साथ नहीं किया जा सकता है। (कम से कम टेबल के बिना) आपको जावास्क्रिप्ट की आवश्यकता होगी जो # बच्चे की चौड़ाई/ऊंचाई पढ़ेगी और फिर वह गणना करें जिसे आप करना चाहते हैं (मुझे नहीं पता) और # ऊंचाई पर एक नई ऊंचाई/चौड़ाई सेट करें।

अन्यथा, यदि आप का मतलब है कि आप अपनी सामग्री के अनुसार # बच्चे की ऊंचाई/चौड़ाई बदलना चाहते हैं, तो निश्चित रूप से यह मूल सीएसएस है, बस इसकी ऊंचाई/चौड़ाई ऑटो पर सेट करें और उसके बाद टेक्स्ट जोड़ने शुरू करें यह आपकी सामग्री को फिट करने के लिए बढ़ने लगेगा।

चूंकि #child पूर्ण स्थान पर स्थित है, तो इसे दस्तावेज़ के सामान्य प्रवाह से बाहर ले जाया जाता है, इसलिए यह # मूल को प्रभावित नहीं करेगा।

Answer 2

आधुनिक सीएसएस के साथ, यह करने योग्य है।

HTML:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"> 
     <p>CHILD ELEMENT</p> 
    </div> 
</div> 

सीएसएस:

#parent { 
    background:red; 
    height: 500px; 
    position:relative; 
} 
#child { 
    background:green; 
    position: absolute; 
    top:100%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%); 
    width: 100px; 
} 

http://jsfiddle.net/Bushwazi/bpe5s6x3/

1. transform:translateY(-100%); चाल है। यह गणित element के box-model पर आधारित है।
2. आप top:50%; को transform:translateY(-50%); के साथ संयोजित करने के लिए भी जोड़ सकते हैं।
3. आप क्षैतिज तत्व स्थिति translateX के लिए left और translateY के लिए top स्वैप कर सकते हैं।

Answer 3

यहां आपको

HTML:

<main id="parent"> 
    <div class="popup">Top Aligned Title 
    <div class="content"> 
     Content 
    </div> 
    </div> 
</main> 

सीएसएस:

#parent { 
    width: 120px; 
} 

.popup { 
    position: relative; 
    margin-top: 48px; 
} 

.content { 
    left: 0; 
    position: absolute; 
    background: green; 
    width: 100%; 
} 

http://jsfiddle.net/8L9votay/