परिवर्तनीय ऊंचाई स्क्रॉलिंग div, परिवर्तनीय ऊंचाई भाई के संबंध में स्थित

Question

हाल ही में मैंने इस प्रश्न से पूछा: overflow (scroll) - 100% container height परिवर्तनीय ऊंचाई के साथ लंबवत स्क्रॉलिंग div को कैसे प्राप्त करें।

एक बहुत ही उपयोगी उपयोगकर्ता ने पूर्ण स्थिति और ऊंचाई का उपयोग करके समाधान प्रदान किया: 100%, यहां: http://jsfiddle.net/TUwej/2/। इस पहेली में, आप मूल वांछित व्यवहार देख सकते हैं - स्क्रॉलिंग div मुख्य कंटेनर की ऊंचाई को भर देगा जैसा कि '#main' तत्व में सामग्री द्वारा निर्धारित किया गया है।

मैंने इसे कुछ हद तक संशोधित किया और शीर्ष पर उपयोग किया: 0 नीचे: 0 ऊंचाई के बजाय: स्क्रॉल करने योग्य क्षेत्र के ऊपर किसी तत्व को समायोजित करने के लिए 100%। संशोधित संस्करण यहां देखा जा सकता है: http://jsfiddle.net/N6muv/3/ (मुझे एहसास है कि कुछ अतिरिक्त मार्कअप और कक्षा परिभाषाएं खाली हैं, और एक आसन्न भाई संयोजक जो अनावश्यक प्रतीत होता है - ये वास्तविक संरचना के निहित हैं)

सब कुछ ठीक है, सिवाय इसके कि मुझे स्क्रॉलिंग div के लिए एक निश्चित शीर्ष समन्वय प्रदान करना था (शीर्ष पर ध्यान दें: 'साइडबार-सूची' चयनकर्ता के लिए 120px घोषणा)। मैं इसे उपरोक्त 'साइडबार-विकल्प' तत्व से संबंधित होना चाहता हूं, ताकि उपरोक्त विकल्प कंटेनर में कई विकल्प हो सकें और स्क्रोल करने योग्य div उचित रूप से स्थिति बनाए रखे। निश्चित निर्देशांक का उपयोग करके, यदि कोई विकल्प जोड़ा या हटा दिया गया है, तो ओवरलैप होता है या अनावश्यक स्थान विकसित होता है - मैं इससे बचना चाहता हूं। दिखाई देने वाले विकल्पों की सटीक संख्या दृश्यों के बीच भिन्न होती है।

मैंने स्क्रॉलिंग div को अपेक्षाकृत स्थित कंटेनर में लपेटने के लिए सोचा था, लेकिन ऐसा करने से नीचे एक संघर्ष होता है: 0 अब मुख्य '.wrapper' कंटेनर की ऊंचाई को इंगित नहीं करता है (जो इसे करना चाहिए)। इसी तरह, ऊंचाई का उपयोग: 100% '.wrapper' कंटेनर की गणना की ऊंचाई का उपयोग करेगा ताकि स्क्रॉल करने योग्य div '.wrapper' की सीमा से आगे बढ़े।

दूसरी पहेली में दिखाए गए कार्यक्षमता को बनाए रखने का कोई तरीका है, लेकिन विकल्प div के नीचे से संबंधित स्क्रोल करने योग्य div के शीर्ष के साथ (जो परिवर्तनीय ऊंचाई का होगा)?

किसी भी सुझाव के लिए अग्रिम धन्यवाद।

संपादित करें: एसओ। पूछा कि क्या मैं एक बक्षीस शुरू करना चाहता था, इसलिए मैंने (पहली बार) किया - उम्मीद है कि 100 अंक कम नहीं माना जाता है। अभी भी एक नो-स्क्रिप्ट, शुद्ध-सीएसएस समाधान की तलाश है जिसमें वाई-अक्ष के लिए निश्चित निर्देशांक या आयाम शामिल नहीं हैं (चौड़ाई और बाएं असाइनमेंट ठीक हैं)। THX

Answer 1

अद्यतन:

आयात JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

नई डेमो:

var contentColHeight = $('.content').height(); 
var optionColHeight = $('.sidebar-options').height(); 
var newHeight = contentColHeight - optionColHeight; 
$('.sidebar-list').height(newHeight); 

0: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

अपने पृष्ठ में अच्छी छोटी JQuery स्क्रिप्ट जोड़ें

---

पुराने

कैसे अपनी आवश्यकताओं इस सूट करता है? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

मैं position:relative को position:absolute; बदल गया है और एक स्थिर height:190px जोड़ा और साथ ही background:pink; जोड़ने (ताकि bg हमेशा सही दिखता है)

आप सूची से जोड़ने और हटाने के विकल्प के ऊपर इस डेमो के लिए कोशिश कर सकते हैं।

पूर्ण कोड:

.sidebar-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background : pink; 
} 

Answer 2

मेरा मानना ​​है कि आप आंतरिक तत्वों पर पूर्ण स्थिति को हटाने और अतिप्रवाह प्रयास करना चाहिए: ऑटो।

Answer 3

आपको साइडबार सूची कोज़ की ऊंचाई को परिभाषित करने की आवश्यकता है जिसे आपको स्क्रॉल-सक्षम करने के लिए इस सामग्री को सेट करना है और न्यूनतम या अधिकतम ऊंचाई परिभाषित की जानी चाहिए। और अगर आप सेट कर सकते हैं .sidebar-list{position: relative;} इस Fiddle

संपादित आपका .sidebar-content भी अपेक्षाकृत तैनात किया जाना चाहिए देखें इस Fiddle जो कुछ भी अपने 'विकल्प' सामग्री मौजूद है देखें।