ओवरफ्लो स्क्रॉल सीएसएस div

Question

में काम नहीं कर रहा है मैं अपने एचटीएमएल पेज स्क्रॉलिंग मुद्दे के लिए सीएसएस/जावास्क्रिप्ट समाधान की तलाश में हूं।

मैं तीन divs कि एक div, एक शीर्षक और एक आवरण div होते हैं,

मैं आवरण div में एक खड़ी स्क्रॉलबार की जरूरत है, ऊंचाई ऑटो या 100% सामग्री के आधार पर होना चाहिए।

हैडर समाधान हो गया होगा, और मैं समग्र स्क्रॉलबार तो मैं शरीर टैग में overflow:hidden दे दिया है नहीं करना चाहते,

मैं अपने आवरण div में खड़ी स्क्रॉलबार की जरूरत है। मैं इसे कैसे ठीक करूं?

एचटीएमएल

<div id="container"> 

    <div class="header"></div> 

    <div class="wrapper"> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
     <!-- Lots more paragraphs--> 
    </div> 

</div> 

सीएसएस

body{ margin:0; padding:0; overflow:hidden; height:100%} 
#container { width:1000px; margin:0 auto;} 
.header { width:1000px; height:30px; background-color:#dadada;} 
.wrapper{ width:1000px; overflow:scroll; position:relative;} 

इस JS Fiddle

Answer 1

को देखें प्रयास करें एक खड़ी स्क्रॉलबार के लिए इस:

overflow-y:scroll; 

Answer 2

यदि आप .wrapper कक्षा में ऊंचाई जोड़ते हैं तो आपकी स्क्रॉल काम कर रही है, बिना height स्क्रॉल काम नहीं कर रहा है।

इस http://jsfiddle.net/ZcrFr/3/

सीएसएस का प्रयास करें:

.wrapper { 
    position: relative; 
    overflow: scroll; 
    width: 1000px; 
    height: 800px; 
} 

Answer 3

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

Answer 4

मैं संपादित अपने: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% } 
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;} 
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;} 

एचटीएमएल टैग एक 100% ऊंचाई देते हुए समाधान है। मैंने कंटेनर div भी हटा दिया। जब आपका लेआउट इस तरह रहता है तो आपको इसकी आवश्यकता नहीं होती है।

Answer 5

आप height सीएसएस संपत्ति खो रहे हैं।

इसे जोड़कर आप देखेंगे कि स्क्रॉल बार दिखाई देगा।

.wrapper{ 
    // width: 1000px; 
    width:600px; 
    overflow-y:scroll; 
    position:relative; 
    height: 300px; 
} 

JSFIDDLE

documentation से

:

overflow-y

अतिप्रवाह-y सीएसएस संपत्ति सामग्री क्लिप के लिए कि क्या, एक ब्लॉक की एक स्क्रॉल पट्टी, या प्रदर्शन अतिप्रवाह सामग्री प्रस्तुत करना निर्दिष्ट करता है -लेवल तत्व, जब यह ऊपर और नीचे किनारों पर बहती है।

Answer 6

मैं @Ionica Bizau पर टिप्पणी करना चाहता था, लेकिन मेरे पास पर्याप्त प्रतिष्ठा नहीं है।
जावास्क्रिप्ट कोड के बारे में अपने प्रश्न का उत्तर देने के लिए:
आपको क्या करने की आवश्यकता है माता-पिता की तत्व ऊंचाई (अंतरिक्ष को लेने वाले किसी भी तत्व को कम करें) और इसे बाल तत्वों पर लागू करें।

function wrapperHeight(){ 
    var height = $(window).outerHeight() - $('#header').outerHeight(true); 
    $('.wrapper').css({"max-height":height+"px"});  
} 

नोट
खिड़की ".container" अगर है कि एक नहीं जारी बच्चे हैं या सही ऊंचाई की गणना करने के लिए एक ठीक है द्वारा प्रतिस्थापित किया जा सकता है। यह समाधान jQuery का उपयोग करता है।

Answer 7

समाधान ऊंचाई जोड़ने के लिए है: 100%; आपके .wrapper-div के सभी अभिभावक-तत्वों के साथ-साथ। तो:

html{ 
    heigth: 100%; 
} 

body{ 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    height:100%; 
} 

#container{ 
    width:1000px; 
    margin:0 auto; 
    height:100%; 
} 

Answer 8

Angular2 + Material2 + Sidenav लिए, आप निम्न कार्य करने होंगे:

ngAfterViewInit() { 
    this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
    }