एक निश्चित साइडबार के अंदर स्क्रॉल करें

Question

मेरे पास मेरी साइट के बाईं ओर एक निश्चित साइडबार है जिसमें सामग्री पर स्क्रीन पर प्रदर्शित होने के लिए बहुत अधिक सामग्री है। सही सामग्री को स्क्रॉल करने योग्य होने की अनुमति देते हुए मैं उस सामग्री को स्क्रॉल करने योग्य कैसे बना सकता हूं?

मुझे लगता है कि एक साधारण overflow-y: scroll; पर्याप्त होगा। ऐसा लगता है कि मुझे साइडबार पर अधिकतम ऊंचाई की आवश्यकता है, लेकिन अधिकतम ऊंचाई को 100% तक सेट करना कुछ भी नहीं करता है। मुझे यकीन है कि यह एक साधारण कोड पैटर्न है, लेकिन हां, मेरे सीएसएस कौशल ने आज मुझे छोड़ दिया है।

सरल यहाँ उदाहरण: http://jsfiddle.net/tvysB/1/

Answer 1

top और bottom0 पर सेट करें, ताकि साइडबार व्यूपोर्ट रूप में एक ही ऊंचाई ठीक है:

#leftCol { 
    position: fixed; 
    width: 150px; 
    overflow-y: scroll; 
    top: 0; 
    bottom: 0; 
} 

यहाँ है अपने बेला: http://jsfiddle.net/tvysB/2/

Answer 2

मेरे पास यह वही समस्या थी और इसका उपयोग करके इसे ठीक किया गया:

.WhateverYourNavIs { 
     max-height: calc(100vh - 9rem); 
     overflow-y: auto; 
} 

यह आपके नौसेना के लिए अधिकतम ऊंचाई सेट करता है जो उपयोगकर्ता ब्राउज़र की ऊंचाई के प्रति उत्तरदायी है और फिर उसे इसकी आवश्यकता होने पर स्क्रॉल देता है।