जेएस और jQuery स्क्रॉलर के लिए सीएसएस का उपयोग करके साइड बार और हेडर को कैसे ठीक करें

Question

मेरे पास यह लेआउट है और मैं बाएं साइडबार, दायां साइडबार और हेडर तय करना चाहता हूं।

यह मेरा सीएसएस है:

#container { 
     padding-left: 200px;  /* LC fullwidth */ 
     padding-right: 190px;  /* RC fullwidth + CC padding */ 
    } 

    #container .column { 
     position: relative; 
     float: left; 
    } 

    #center { 
     padding: 10px 20px;  /* CC padding */ 
     width: 100%; 
     overflow-x:hidden; 
    } 

    #left { 
     width: 180px;    /* LC width */ 
     padding: 0 10px;   /* LC padding */ 
     right: 240px;    /* LC fullwidth + CC padding */ 
     margin-left: -100%; 
    } 

    #right { 
     width: 130px;    /* RC width */ 
     padding: 0 10px;   /* RC padding */ 
     margin-right: -100%; 
    } 

    #footer { 
     clear: both; 
    } 

& कोड here

है इस कदम के बाद, मैं सही साइड बार करने के लिए nanScrollerJS जोड़ना चाहते हैं।

मैं सीएसएस

Answer 1

क्या आप यह करने की कोशिश कर रहे थे?

Fiddle

मैं अपने कोड के लगभग सभी मिट और नए कोड से बदल दिया गया है।

# तय

position: fixed; 
top: 0; 
left: 0; 
width: 100%; 

# केंद्र

margin-top: 32px; /* Header height */ 
padding: 10px 20px; /* CC padding */ 
box-sizing: border-box; 
border-left: 200px solid black; /* LC width including padding */ 
border-right: 150px solid black; /* RC width including padding */ 

# छोड़ दिया

width: 180px; /* LC width */ 
padding: 0 10px; /* LC padding */ 
float: left; 

# सही

width: 130px; /* RC width */ 
padding: 0 10px; /* RC padding */ 
float: right; 

# पाद लेख

position: relative; 
z-index: 1; 

Answer 2

से परिचित आप position:fixed उपयोग कर सकते हैं नहीं कर रहा हूँ, लेकिन, ज़ाहिर है, IE के लिए आप इसे काम करने के लिए कुछ हैक्स की आवश्यकता होगी।

Answer 3

आप हमेशा एक पूर्ण ऊंचाई के साथ केंद्र को ठीक कर सकते हैं, और फिर अतिप्रवाह-वाई। यहाँ मैं क्या मतलब है की एक उदाहरण है:

#center { 
     padding: 10px 20px;  /* CC padding */ 
     width: 100%; 
     height: 240px;    
     overflow-y:scroll;   
     overflow-x:hidden; 
    } 

और यहाँ एक काम उदाहरण (तुम्हारा के आधार पर) है: इस मामले में http://jsfiddle.net/nr2NZ/27/

तकनीकी तौर पर nanScrollerJS पर उदाहरण के बाहर की दुनिया में एक निश्चित div का उपयोग करता है, तथापि, यह ऐसा इसलिए हो सकता है क्योंकि अगर बाहरी बक्से संबंधित स्थिति हैं, यानी सैद्धांतिक रूप से कोई समस्या नहीं होनी चाहिए।