संवाद के साथ एक jQuery UI संवाद आकार में घोंसला एक div बनाओ?

Question

मेरा jQuery UI संवाद में दो div तत्व हैं। एक निश्चित ऊंचाई है और हर समय संवाद के नीचे गठबंधन किया जाना चाहिए। दूसरे को शेष जगह लेनी चाहिए।

असल में मैं चाहूँगा सभी आयामों नीले रंग में हाइलाइट आकार बदलने पर अपरिवर्तित रहे। या, दूसरे शब्दों में, लाल div दोनों आयामों में आकार बदलता है लेकिन हरा div इसकी ऊंचाई रखता है।

jQuery UI या यहां तक ​​कि केवल सादे सीएसएस में ऐसा करने का सबसे आसान तरीका क्या है?

Answer 1

मुझे ऐसा करने का कोई तरीका मिला है जो किसी भी जावास्क्रिप्ट का उपयोग नहीं करता है। इसमें किसी भी हैक भी शामिल नहीं है; बस सामान्य सामान्य CSS3। यहाँ बेला: http://jsfiddle.net/nty5K/16/

असल में, दोनों divs position: absolute हैं, और पक्षों को अलग-अलग top, bottom, left और right गुणों का उपयोग करके लंगर डाले है। शीर्ष div में सभी चार पद निर्दिष्ट हैं, जो कंटेनर के साथ प्रत्येक आकार के सटीक दूरी को संरक्षित करते समय कंटेनर के साथ आकार बदलते हैं। निचले div में तीन पद तय किए गए हैं, जबकि शीर्ष केवल एक निश्चित ऊंचाई के माध्यम से अप्रत्यक्ष रूप से परिभाषित किया गया है।

प्रैक्टिस में, divs को एक रैपर div में रखा जाना चाहिए जिसमें position: relative है, अन्यथा शीर्ष/नीचे divs शरीर तत्व के सापेक्ष स्थित होंगे।

अभी तक ब्राउज़र संगतता के बारे में निश्चित नहीं है, लेकिन यह फ़ायरफ़ॉक्स 10, आईई 9 और क्रोम 17 में ठीक काम करता है। पहले के संस्करणों में इसका परीक्षण नहीं किया था।

Answer 2

बस सीएसएस ... check it out!

सेट कंटेनर में एक margin और नीचे तय div करने के लिए एक margin-top। कोई jQuery आवश्यक है।

Answer 3

कॉर्पोरेट फ़ायरवॉल छवियों को अवरुद्ध कर रहा है, इसलिए मैं अनुमान लगा रहा हूं कि आप अन्य टिप्पणियों के आधार पर क्या कर रहे हैं।

संपादित करें: अब मैं देख सकता हूँ कि क्या आप के बाद, मैं अपने बेला तदनुसार अपडेट कर दिया है कर रहे हैं। पूर्णता के लिए नीचे दिए गए कोड सहित।

मैं संवाद के आकार की गणना करने के लिए एक फ़ंक्शन लिखूंगा, निश्चित div की ऊंचाई घटाएं और गतिशील div की ऊंचाई को इस गणना मूल्य पर सेट करें। इसके बाद मैं इस समारोह को संवाद के आकार बदलने के लिए कॉल कर दूंगा। Here एक बेवकूफ है, अपने सटीक लेआउट के लिए कुछ tweaking की आवश्यकता हो सकती है, लेकिन करीब होना चाहिए।

एक गॉचा लायक नोटिंग यह है कि कुछ ब्राउज़र स्क्रॉल/आकार बदलने की घटना के बीच में सही ढंग से गणना नहीं कर सकते हैं, सेटटाइमआउट के साथ आकार बदलने के बाद होने वाली गणनाओं को क्विक करने के बाद समस्याएं हल होती हैं, हालांकि यह समस्याएं हल करती है आकार बदल रहा है, जबकि थोड़ा अजीब बदलो। यह question देखें और विवरण के लिए उत्तर दें।

function SetDivHeight() { 
    var $DynamicDiv = $('div.dynamic'); 
    var $FixedDiv = $('div.fixed'); 
    var $Container = $(window); //Update for containing element 

/*Calculate the adjustment needed to account for the margin and 
border of the dynamic div.*/ 
    var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height(); 

/*Get the values of the top and bottom margins which overlap 
between the two divs.*/ 
    var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom')); 
    var FixedTopMargin = parseInt($FixedDiv.css('marginTop')); 

/*Adjust for the overlapping top/bottom margin by subtracting 
which ever is smaller from the adjustment value.*/ 
    if (DynamicBottomMargin >= FixedTopMargin) { 
     HeightAdjustment -= FixedTopMargin; 
    } else { 
     HeightAdjustment -= DynamicBottomMargin; 
    } 


/*subtract the height of the fixed div from the height of the 
container, subtract the calculated height adjustment from that 
value, and set the result as the height of the dynamic div.*/ 
    $DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) - 
HeightAdjustment); 
/*May need to use $Container.innerHeight instead, if container 
is not a window element.*/ 
} 

var t; 

function QueueSetDivHeight() { 
    if (t) { 
     clearTimeout(t); 
    } 
    t = setTimeout(function() { 
     SetDivHeight(); 
    }, 0); 
} 

$(document).ready(function() { 
    SetDivHeight(); 
    $(window).resize(QueueSetDivHeight); 
    //Bind to resize of container element instead/as well 
});