फ्लोटेड div पूर्ण गति के बिना गतिशील माता-पिता की 100% ऊंचाई?

मैंने यहां बहुत कुछ पढ़ा है, और मेरे उत्तर का समाधान नहीं मिल रहा है।फ्लोटेड div पूर्ण गति के बिना गतिशील माता-पिता की 100% ऊंचाई?

मेरे पास नीचे दिए गए एचटीएमएल के अनुसार कई फ्लोटेड बाएं divs के साथ एक कंटेनर div है।

<div class="catbg0" id="b1"> 

    <div class="catb1">#</div> 
    <div class="catb2">Board Name</div> 
    <div class="catb3">Topics</div> 
    <div class="catb4">Posts</div> 
    <div class="catb5">Last Post</div> 
    <div class="clearboth"></div> 

</div>

मेरे समस्या यह है कि .catbg0 एक विशिष्ट ऊंचाई नहीं है, .catb2 की सामग्री इसे अपनी ऊंचाई के लिए नीचे धक्का, और सामग्री के रूप में भिन्न हो सकते हैं मैं एक विशिष्ट ऊंचाई सेट नहीं कर सकते। मैं शेष .catb कक्षाओं को .catbg0 वर्ग की 100% ऊंचाई पर जाना चाहता हूं, लेकिन ऊंचाई निर्धारित करना: 100%; काम नहीं करता।

नीचे दिया गया सीएसएस है जो ऊपर से संबंधित है।

.catb1 {float: left; width: 9%; height: 100%; min-height: 100%;} 
.catb2 {float: left; width: 52%; height: 100%; min-height: 100%;} 
.catb3 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb4 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb5 {float: left; width: 23%; height: 100%; min-height: 100%;} 
.clearboth {clear: both; height:0; width: 0; margin: 0; padding: 0;}

कोई विचार? धन्यवाद।

स्रोत

2012-10-16 sangwe11

SO में आपका स्वागत है! अगर आप प्रासंगिक सीएसएस भी शामिल करते हैं तो इसका उत्तर देना आसान होगा। – JcFx

जैसा कि मुझे पता है कि केवल स्थिति के साथ ब्लॉक है: पूर्ण 100% ऊंचाई और उसके बच्चे भी हो सकते हैं।

<div class="catbg0" id="b1"> 

    <div class="catb2">Board Name</div> 

    <div class="wrapper"> 
     <div class="catb1">#</div> 
     <!-- margin == catb2 width --> 
     <div class="catb3">Topics</div> 
     <div class="catb4">Posts</div> 
     <div class="catb5">Last Post</div> 
    </div> 

    <div class="clearboth"></div> 

</div>

सीएसएस

.catbg0 { position: relative; } 
.wrapper { position: absolute; width: 100%; height: 100%; } 
.catb2 { margin-left: /* catb1 width here */ }

पी.एस.:

.catb2 .catb की सबसे बड़ी ऊंचाई है, तो आप यह सुनिश्चित करें कि * आवरण को जोड़ने का प्रयास शायद यह आपके लिए उपयोगी होगा - A new micro clearfix hack

स्रोत

2012-10-16 20:01:49

यह ठीक काम करता प्रतीत होता है, तथ्य यह है कि .catb2 div अब बाकी फ्लोटेड divs के पीछे छिपा हुआ है? अगर मैं .catb1 {मार्जिन-दाएं: 52% (.catbg2 की चौड़ाई) जोड़ता हूं तो यह ठीक काम करता है? ऐसा इसलिए है क्योंकि मैंने भाग सही ढंग से नहीं बदला है? – sangwe11

हां, आप .catb1 {margin-right: 52%;} या .catb3 {margin-left: 52%} जोड़ सकते हैं। इससे कोई फर्क नहीं पड़ता –

यहां इसके लिए एक jsfiddle उदाहरण है: https://jsfiddle.net/f14p9kzL/ मैं भी स्थिति पूर्ण उपयोग नहीं करना चाहता था लेकिन कुछ भी मैंने काम करने की कोशिश नहीं की और यह वास्तव में सबसे अच्छा समाधान है – Francisc0

मुझे पूरा यकीन नहीं है। लेकिन कंटेनर (catbg0) एक अतिप्रवाह दे रहा है: छुपा; काम कर सकते हैं आम तौर पर यह जो करता है वह div को फैलाता है जिसे इसे लागू किया जाता है (जब कोई विशिष्ट ऊंचाई सेट नहीं होती है)।

नोट: यह अभी भी एक अतिप्रवाह, लंबा शब्द इत्यादि है और divs ओवरफ्लो मास्क div के बाद से चलते रहेंगे।

स्रोत

2012-10-16 17:41:38 CaptainCarl

प्रासंगिक सीएसएस जोड़ा गया। साथ ही, जिस समस्या को मैं ठीक करने की कोशिश कर रहा हूं वह कंटेनर div को खींच नहीं रहा है, स्पष्ट बॉब तत्व यह करता है कि यह .catb1, .catb3, .catb4, .catb5, जो भी ऊंचाई तक फैलाता है .catb2 .catb0 भी फैलाता है। – sangwe11

फ्लोटेड div पूर्ण गति के बिना गतिशील माता-पिता की 100% ऊंचाई?

उत्तर

संबंधित मुद्दे