Cách sửa thanh bên và tiêu đề bằng cách sử dụng CSS cho JS & jQuery Scroller

Question

Tôi có bố cục này và tôi muốn tạo thanh bên trái, thanh bên phải và tiêu đề cố định.

Đây là css của tôi:

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

& mã là here

Sau bước này, tôi muốn thêm nanScrollerJS vào thanh bên phải.

Tôi không quen với CSS

Answer 1

Đây có phải là những gì bạn đang cố gắng làm không?

Fiddle

Tôi đã xóa gần như tất cả mã của bạn và thay thế bằng mã mới.

# cố định

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

# trung tâm

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

# trái

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

# đúng

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

# chân

position: relative; 
z-index: 1; 

Answer 2

Bạn có thể sử dụng position:fixed, nhưng, dĩ nhiên, đối với IE bạn sẽ cần một số hacks để làm cho nó làm việc.

Answer 3

Bạn luôn có thể sửa chữa trung tâm với chiều cao tuyệt đối và sau đó tràn-y. Dưới đây là một ví dụ về những gì tôi có nghĩa là:

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

và đây là một ví dụ làm việc (dựa trên của bạn): http://jsfiddle.net/nr2NZ/27/

Về mặt kỹ thuật ví dụ trên nanScrollerJS sử dụng một div cố định ở bên ngoài, tuy nhiên trong trường hợp này, nó có thể bởi vì nếu các hộp bên ngoài là vị trí tương đối, tức là không nên về mặt lý thuyết có một vấn đề.