निश्चित स्थिति कंटेनर में सामग्री का स्क्रॉल भाग

Question

मेरे पास एक साइडबार के रूप में एक लेआउट में position: fixed div है। मुझे इसकी सामग्री का हिस्सा रखने के लिए कहा गया है (आंतरिक रूप से), और बाकी को स्क्रॉल करने के लिए, यदि यह div के नीचे बहती है।

मैंने this answer पर एक नज़र डाली है, हालांकि वहां प्रस्तुत समाधान position: fixed या position: absolute कंटेनर के साथ काम नहीं करता है, जो दर्द है।

मैंने अपनी समस्या का एक JSFiddle प्रदर्शन किया है here। पेज के निचले भाग में बहने की बजाए टेक्स्ट की बड़ी मात्रा आदर्श रूप से स्क्रॉल होनी चाहिए। शीर्षलेख की ऊंचाई सामग्री के साथ भिन्न हो सकती है, और एनिमेटेड हो सकती है।

JSFiddle उदाहरण कोड:

सीएसएस:

div.sidebar { 
    padding: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
    position: fixed; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    width: 280px; 
} 

div#fixed { 
    background: #76a7dc; 
    padding-bottom: 10px; 
    color: #fff; 
} 

div#scrollable { 
    overlow-y: scroll; 
} 

HTML:

<div class="sidebar"> 
    <div id="fixed"> 
     Fixed content here, can be of varying height using jQuery $.animate()   
    </div> 

    <div id="scrollable"> 
     Potentially long content 
    </div> 
</div>​ 

एक निश्चित हेडर के बिना, मैं बस जोड़ सकते हैं div.sidebar को overflow-y: scroll और मैं खुशी से यह सब की सामग्री स्क्रॉल कर सकते हैं अगर यह कंटेनर के नीचे बहती है। हालांकि, मैं साइडबार के शीर्ष पर एक निश्चित, परिवर्तनीय ऊंचाई शीर्षलेख रखने के साथ मुद्दों में भाग रहा हूं, और उस स्क्रॉल के नीचे कोई सामग्री होने पर कंटेनर में फिट होने में बहुत लंबा समय लगता है।

div.sidebarचाहिए ठहरने position: fixed, और मैं बहुत ज्यादा किसी भी हैक्स के बिना ऐसा करने के लिए, साथ ही संभव के रूप में पार ब्राउज़र के रूप में इसे बनाने के लिए चाहते हैं। मैंने विभिन्न चीजों का प्रयास किया है, लेकिन उनमें से कोई भी काम नहीं करता है, और मुझे यकीन है कि यहां से क्या प्रयास करना है।

मैं position: fixed कंटेनर स्क्रॉल के अंदर केवल एक दिशा में कैसे बना सकता हूं जब यह सामग्री अलग-अलग, अनिश्चित ऊंचाई के एक निश्चित शीर्षलेख के साथ युक्त div को बहती है? मैं जेएस से दूर रहना चाहता हूं, लेकिन अगर मुझे इसका इस्तेमाल करना है तो मैं करूँगा।

Answer 1

यह काम करने के लिए लगता है अगर आप

div#scrollable { 
    overflow-y: scroll; 
    height: 100%; 
} 

का उपयोग करें और div.sidebar को padding-bottom: 60px जोड़ें।

उदाहरण के लिए: http://jsfiddle.net/AKL35/6/

हालांकि, मैं अनिश्चित हूं क्यों यह 60px होना चाहिए।

इसके अलावा, आप overflow-y: scroll;

Answer 2

स्क्रॉल करने योग्य div को max-size रखने के लिए सेट करें और इसके गुणों में overflow-y: scroll; जोड़ें।

संपादित करें: jsfiddle को काम करने की कोशिश कर रहा है, लेकिन यह ठीक से स्क्रॉल नहीं कर रहा है। इसे समझने में कुछ समय लगेगा।

Answer 3

से f याद किया मैं स्क्रॉल div बदल निरपेक्ष स्थिति के साथ होने के लिए, और सब कुछ काम करता है मुझे

div.sidebar { 
    overflow: hidden; 
    background-color: green; 
    padding: 5px; 
    position: fixed; 
    right: 20px; 
    width: 40%; 
    top: 30px; 
    padding: 20px; 
    bottom: 30%; 
} 
div#fixed { 
    background: #76a7dc; 
    color: #fff; 
    height: 30px; 
} 

div#scrollable { 
    overflow-y: scroll; 
    background: lightblue; 

    position: absolute; 
    top:55px; 
    left:20px; 
    right:20px; 
    bottom:10px; 
} 

DEMO with two scrollable divs

Answer 4

वास्तव में यह करने के लिए बेहतर तरीका है के लिए उस। यदि height: 100% प्रयोग किया जाता है, सामग्री सीमा बंद हो जाता है, लेकिन जब यह है 95% सब कुछ क्रम में है:

div#scrollable { 
    overflow-y: scroll; 
    height: 95%; 
}