Come correggere barra laterale e intestazione utilizzando CSS per JS & jQuery Scroller

Question

Ho questo layout e voglio rendere la barra laterale sinistra, la barra laterale destra e l'intestazione fissi.

Questo è il mio css:

#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; 
    } 

& il codice è here

Dopo questo passo, voglio aggiungere nanScrollerJS alla barra laterale destra.

Non ho familiarità con i CSS

Answer 1

È questo che stavi cercando di fare?

Fiddle

Ho cancellato quasi tutto il codice e lo ha sostituito con il nuovo codice.

# fisso

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

# centro

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 */ 

# lasciato

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

# destra

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

# footer

position: relative; 
z-index: 1; 

Answer 2

È possibile utilizzare position:fixed, ma, ovviamente, per IE avrete bisogno di alcuni hack per farlo funzionare.

Answer 3

È sempre possibile fissare il centro con un'altezza assoluta, quindi eseguire l'overflow-y. Ecco un esempio di ciò che intendo:

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

ed ecco un esempio di lavoro (sulla base di vostro): http://jsfiddle.net/nr2NZ/27/

Tecnicamente l'esempio a nanScrollerJS utilizza un div fissata sulla parte esterna, ma in questo caso, potrebbe perché se le caselle esterne sono relative alla posizione, cioè non dovrebbe teoricamente avere un problema.