CSS कंटेनर div ऊंचाई नहीं प्राप्त कर रहा है

Question

मैं चाहता हूं कि मेरे कंटेनर डिव को अपने बच्चों की ऊंचाई अधिकतम हो। बिना यह जाने कि बच्चे की ऊंचाई कितनी divहोने वाली है। मैं JSFiddle पर कोशिश कर रहा था । कंटेनर divलाल रंग का है। जो दिखाई नहीं दे रहा है। क्यों?

Answer 1

निम्नलिखित संपत्ति जोड़ें:

.c{
    ...
    overflow: hidden;
}

यह कंटेनर को इसके भीतर सभी तत्वों की ऊंचाई का सम्मान करने के लिए मजबूर करेगा, चाहे अस्थायी तत्वों की परवाह किए बिना।
http://jsfiddle.net/gtdfY/3/

अपडेट करें

हाल ही में, मैं एक ऐसी परियोजना पर काम कर रहा था जिसमें इस ट्रिक की आवश्यकता थी, लेकिन अतिप्रवाह को दिखाने की अनुमति देने की आवश्यकता थी, इसलिए इसके बजाय, आप अपने फ़्लोट्स को साफ़ करने के लिए एक छद्म तत्व का उपयोग कर सकते हैं, प्रभावी रूप से सभी तत्वों पर अतिप्रवाह की अनुमति देते हुए समान प्रभाव प्राप्त कर सकते हैं।

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

Comments

मूल रूप से, इस संपत्ति को जोड़ने से बाहरी बॉक्स को उस नियम की अनदेखी करने के लिए मजबूर किया जाता है, जिसमें फ्लोटिंग कंटेनर होते हैं, जहां वे कंटेनरों के लिए ऊंचाई में गणना नहीं करते हैं, और उन्हें पूर्ण पृष्ठभूमि ड्राइंग के लिए लागू करते हैं।

— रात्रि

वाह, मैं जैसा था, "क्या? वह काम नहीं करेगा।" लेकिन मैं हिम्मत करूंगा। मैंने पूरी तरह से सोचा कि यह ठीक से व्यवहार नहीं करने वाला था। धन्यवाद

— fie

क्या यह वास्तव में काफी हैकी नहीं है? मेरे लिए, यह अतिप्रवाह के उद्देश्य को हरा देता है। मुझे समझ नहीं आता कि यह सही और सबसे उत्कट उत्तर क्यों है।

— एंड्रयू वीर

@AndrewWeir मैं मानता हूँ, अब तक, मुझे पूरी तरह से यकीन नहीं था कि कंटेनर के विस्तार की इस पद्धति ने सही तरीके से अपने आकार में तैरने पर विचार क्यों किया। अनुसार करने के लिए कई स्रोतों , ऐसा लगता है कि इस के लिए दिखाई दे अतिप्रवाह अनुमति देने से इसकी प्रतिपादन मोड बदलने के लिए, एक तत्व का कारण बनता है नहीं ऐसा करते समय, और ऐसा करने में, इस बलों तत्वों कि अतिप्रवाह अस्वीकृत करने के लिए।

— रात्रि विश्राम

पहला तरीका, अतिप्रवाह का उपयोग करना, मेरे लिए काम करता है। दूसरा तरीका ALSO काम करता है और लगता है कि भविष्य में मेरे पास ओवरफ्लो होने का खतरा कम है। मैं केवल यही चाहता हूं कि मैं दो बार उत्थान करूं।

— टायलर कोलियर

Answer 2

आप बच्चों को तैर ​​रहे हैं जिसका मतलब है कि वे कंटेनर के सामने "फ्लोट" कर रहे हैं। सही ऊंचाई लेने के लिए, आपको फ्लोट को "स्पष्ट" करना होगा

डिव स्टाइल = "स्पष्ट: दोनों" फ्लोटिंग को साफ करता है जो कंटेनर को सही ऊंचाई देता है। फ़्लोट्स के बारे में अधिक जानकारी के लिए http://css.maxdesign.com.au/floatutorial/clear.htm देखें ।

जैसे।

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

Comments

यह स्पष्ट: दोनों; बात कंटेनर की ऊंचाई के लिए एक उचित समाधान लगती है, क्योंकि मुद्दा तैरते हुए बच्चे हैं। तो यह दृष्टिकोण अतिप्रवाह के बजाय बेहतर लगता है: छिपा हुआ; एक ऊपर।

— रॉनी डेप

इस सरल समाधान को साझा करने के लिए धन्यवाद @Yoeri। अंगूठे! मैं अपने नए डिजाइन के लिए एक ही समाधान की तलाश कर रहा हूं क्योंकि लगभग 6 साल हो गए हैं क्योंकि मैंने आखिरी बार वेब लेआउट डिजाइन किया था क्योंकि मैं पूरी तरह से PHP के विकास के परिप्रेक्ष्य पर ध्यान केंद्रित करता था।

— रोनी डेप

Answer 3

यह इतना आसान नहीं है?

.c {
    overflow: auto;
}

Comments

हाँ यह है: डी। धन्यवाद

— अलाउद्दीन अहमद

Answer 4

अंतिम से पहले इस समाशोधन div को सम्मिलित करने का प्रयास करें </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

Answer 5

सबसे अच्छा और सबसे बुलेटप्रूफ समाधान कंटेनर में छद्म संयोजन ::beforeऔर जोड़ना है ::after। इसलिए यदि आपके पास उदाहरण के लिए एक सूची है जैसे:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

और सूची में हर तत्व के पास float:leftसंपत्ति है, तो आपको अपने सीएसएस में जोड़ना चाहिए:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

या आप display:inline-block;संपत्ति का प्रयास कर सकते हैं, तो आपको किसी भी उपसर्ग को जोड़ने की आवश्यकता नहीं है।