height - creating a menu with CSS and overflow: auto -

पेज की मुख्य संरचना इस तरह से है:

  & lt; html & gt; & LT; बॉडी & gt; & Lt; div id = "मेनू" & gt; & Lt; h1 & gt; मेनू & lt; / h1 & gt; & Lt; ul आईडी = "मेनू लिस्ट & gt;! - कुछ लाइट तत्व - & gt; & lt; / ul & gt; & lt; h1 & gt; सबमेनू 1 & lt; / h1 & gt; & lt; ul id =" सबमेनू 1 सूची "& gt; & lt;! - कई लाइट तत्व - & gt; & lt; / ul & gt; & lt; h1 & gt; सबमेनू 2 & lt; / h1 & gt; & lt; ul id = "सबमेनू 2 लिस्ट" & gt; & lt;! - कई लाइट तत्व - & gt; & lt; / ul & gt; & lt ; H1 & gt; सबमेनू 3 & lt; / h1 & gt; & lt; ul आईडी = "सबमेनू 3 लिस्ट" & gt; & lt;! - कुछ और लाइट तत्व - & gt; & lt; / ul & gt; & lt; / div & gt; & lt; div id = "मुख्य" & Gt; & lt;! - लंबी सामग्री - & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt;  

मैं # मेनू में H1 तत्वों को बनाने के लिए JQuery का उपयोग करता हूं क्लिक करने योग्य है ताकि सभी अन्य उल के लुढ़का और एच 1 के बाद यूएल लुढ़का हो। मैं # मेन्यू के मुख्य रूप से # स्क्रॉल करना चाहूंगा और यदि मैं # मेनु में प्रत्येक उल में, यदि आवश्यक हो तो स्क्रॉलबार चाहता हूं। संबंधित सीएसएस:

 html {ऊंचाई: 100%; अतिप्रवाह: छिपा हुआ; फ़ॉन्ट-आकार: .8em;} शरीर {ऊंचाई: 100%; अतिप्रवाह: छिपी;} div # main {p Osition: पूर्ण; सही: 0 पिक्सेल; शीर्ष: 0 पिक्सेल; नीचे: 0 पिक्सेल; चौड़ाई: 79.9%; } Div # मेनू {स्थिति: पूर्ण; बाएं: 0 पिक्सेल; शीर्ष: 0 पिक्सेल; नीचे: 0 पिक्सेल; चौड़ाई: 20%; } Div # मुख्य {अतिप्रवाह: ऑटो; } Div # menu h1 {font-size: 1.5em; } Div # मेनू उल {अधिकतम-ऊंचाई: 87%; अतिप्रवाह: ऑटो; } 

यह वास्तव में जिस तरह से मैं चाहता हूँ # मुख्य क्षेत्र स्क्रॉल करने योग्य है और प्रत्येक उल, विस्तारित होने पर, स्क्रॉल पट्टी प्राप्त होती है, यदि #Menu DIV युक्त से अधिक सामग्री हो सकती है।

केवल समस्या यह है कि मुझे 87% से युक्त # मेन्यू डीआईवी, जो केवल स्क्रीन आकार, विंडो आकार और फ़ॉन्ट आकार के संयोजन के लिए काम करता है। क्या प्रत्येक यूएल की ऊंचाई को कूट-कोडिंग के बिना एक ही प्रभाव को प्राप्त करने का कोई तरीका है?

यदि आप चाहें, तो आप देख सकते हैं। मैं सीएसएस (/musicdb.css) और जेएस कोड (/musicdb.js) के लिंक पोस्ट करूंगा, लेकिन मुझे अनुमति नहीं है। यदि आप स्रोत देखना चाहते हैं, तो आप यूआरएल में मोड = xml या? Mode = html जोड़कर सामग्री प्रकार स्विच कर सकते हैं और इसे आईई या फ़ायरफ़ॉक्स में देख सकते हैं।

मैं अपनी साइट पेज के आसपास Firebug के साथ खेल रहा था वास्तव में आपके लिए यह एक बहुत ही सरल उपाय नहीं हो सकता है, इसके अलावा एक:

"div # menu" को 100% और "div # menu h1" को प्रतिशत में ऊंचाई पर सेट करना 5% ।

आपके पास "मेनू", "कलाकार", "लेबल" और "प्रारूप" = 4 एच 1 आइटम हैं यह 5 एक्स 4 = 20% है।

# div # मेनू उल "100-20 = 80% तक सेट करें।

संख्याओं के साथ खेलते हैं और ऊर्ध्वाधर संरेखण समायोजित करें, आप जाने के लिए अच्छा होना चाहिए नकारात्मकता यह है कि आपके पास बहुत छोटी या बड़ी स्क्रीन में अच्छा दृश्य नहीं होगा।

मेरे 2 सेंट।