अपने बच्चों की कुल ऊंचाई पर कंटेनर div का आकार कैसे बदलें?

Question

मेरे पास एक कंटेनर तत्व है जिसे मुझे अपनी सामग्री बदलने के रूप में आकार बदलने की आवश्यकता है। इसमें 2 बिल्कुल स्थित डिवीजन होते हैं जो दोनों ऊंचाई बदल सकते हैं। यदि मैं कंटेनर की ऊंचाई निर्दिष्ट नहीं करता हूं तो कंटेनर के बाद सामग्री के नीचे कुछ भी गायब हो जाता है।

फिलहाल मैं निम्नलिखित कर रहा हूँ लेकिन मैं एक कम श्रमसाध्य विकल्प खोजने के लिए खुश हो जाएगा:

(कंटेनर स्थिति है: निरपेक्ष # की सामग्री: रिश्तेदार, #main और #sidebar स्थिति हैं साइडबार कोई स्थिति निर्दिष्ट) है

सीएसएस:

div#mapcontainer { position:relative; width:100%; height: 600px; } 
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; } 
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;} 

एचटीएमएल:

<div id="container"> 
    <div id="main">variable height content here</div> 
    <div id="sidebar"> 
     <div id="foo">...</div> 
     <div id="bar">....</div> 
     ... 
    </div> 
<div> 

js:

fixHeights = function() { 
    var children_height = 0; 
    $('#sidebar'). children().each(function(){children_height += $(this).height();}); 
    $('#container').height(Math.max(children_height, $('#main').height())); 
}; 

Answer 1

यह एक बहुत ही अजीब सवाल है, div की ऊंचाई हमेशा अपने बच्चों की ऊंचाई है के रूप में है।

क्या आप अपने कंटेनर div में फ़्लोटिंग सामग्री कर रहे हैं? जब आप बच्चे की सामग्री को फ़्लोट करते हैं तो युक्त div अब और कार्य नहीं करता है।

आपको ऐसी सामग्री को कंटेनर div के नीचे पिछले फैली चल रहे हैं, कंटेनर div के बच्चों के बिल्कुल नीचे तक निम्नलिखित div जोड़ें:

<div style="clear:both;"></div> 

बच्चों फ्लोट करने के लिए अनुमति नहीं दी जाएगी कि इस पर, इस प्रकार युक्त div मजबूर कर इसकी सबसे ऊंची बच्चे की ऊंचाई होने के लिए ...

<div id="container"> 
    <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div> 
    <div id="static" style="margin-left:104px;">Lots of static stuff here</div> 
    <div style="clear:both;"></div> 
</div> 

---

ठीक है, मुझे यकीन है कि आप स्थिति जिस तरह से आप कर रहे हैं क्यों कर रहे हैं नहीं कर रहा हूँ, लेकिन मैं 've एक ऐसी वेबसाइट के लिए कुछ ऐसा किया जो डेस्कटॉप एप्लिकेशन की तरह दिखना था। मुझे विश्वास नहीं है कि जावास्क्रिप्ट के अलावा इसे करने का कोई तरीका है। एचटीएमएल दस्तावेजों को बहने के लिए डिजाइन किया गया है, कठोर नहीं है। यदि आप जावास्क्रिप्ट पर जमानत देना चाहते हैं, तो आपको पोजीशनिंग शैलियों को छोड़ना होगा और अपने फ्लोटिंग और क्लियरिंग डिव का उपयोग करना होगा। इसकी नहीं कि भयानक ...

Answer 2

आप चल रहे हैं कंटेनर div "अतिप्रवाह: ऑटो" भी खास तौर पर पूरे आईई hasLayout पराजय के संबंध में, जादुई काम कर सकते हैं

Answer 3

आप निर्दिष्ट नहीं किया है लेकिन मुझे लगता है कि आपको फ़्लोटिंग तत्वों में समस्या हो रही है और आप कंटेनर चाहते हैं कि वे कम से कम सबसे बड़े फ्लोटिंग तत्व के आकार में हों। आप की कोशिश करनी चाहिए निम्नलिखित सीएसएस हैक कि ब्राउज़र बलों चल तत्वों के आकार के कंटेनर तत्व के आकार rerender करने के लिए:

#wrapper:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
} 

मुझे पता है कि आप के साथ आने दें और अगर यह काम करता है। अपने ब्राउज़र के आधार पर कोशिश करने के लिए कई अन्य हैक्स हैं।

Answer 4

मैं पूर्ण स्थिति का उपयोग न करने के लिए सीएसएस को बदलने की कोशिश करता हूं। फ़ायरफ़ॉक्स में आपको नक्शा कंटेनर को सही ऊंचाई प्राप्त करने के लिए टिप्पणियों में उल्लिखित रैपर चाल का उपयोग करना होगा।

div # mapcontainer {clear: दोनों; चौड़ाई: 100%; न्यूनतम ऊंचाई: 600 पीएक्स; }

div # मुख्य {float: left; मार्जिन-बाएं: 10 पीएक्स; चौड़ाई: 500 पीएक्स; ऊंचाई: 400 पीएक्स; }

div # साइडबार {फ्लोट: बाएं; मार्जिन टॉप: 10px; मार्जिन-सही: 10px; चौड़ाई: 155 पीएक्स; ऊंचाई: 405 पीएक्स;}

Answer 5

Overflow:visible; यह टिकट है। overflow:auto यदि आवश्यक हो, तो स्क्रॉल बार बनाएगा।