css：左导航滚动

左面板和主要内容应单独滚动。css：左导航滚动

以下是小调。

http://plnkr.co/edit/Le6hPWwMm0pu5Ukm2cYg?p=preview

以下是CSS为

html { 
overflow-y: scroll; 
} 


body { 
margin: 0; 
padding: 0; 
overflow-x: hidden; 
font-family: Arial; 
font-size: 18px; 
position:fixed; 
overflow-y:auto; 
} 


header { 
background-color: #3b5998; 
padding: 10px; 
text-decoration: none; 
position: fixed; 
width: 100%; 
z-index: 1; 
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4); 
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4); 
} 


#content { 
background-color: #FFFFFF; 
padding: 52px 10px 10px 10px; 
position: relative; 
width: auto; 
height: 100%; 
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4); 
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4); 
overflow-y:auto; 
} 

#hamburger { 
border: 1px solid #374C77; 
border-radius: 3px 3px 3px 3px; 
cursor: pointer; 
display: block; 
height: 24px; 
padding: 3px 4px 3px; 
position: relative; 
width: 25px; 
background: #4569b2; 
background: -moz-linear-gradient(top, #4569b2 0%, #4062a5 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4569b2), color-stop(100%, #4062a5)); 
background: -webkit-linear-gradient(top, #4569b2 0%, #4062a5 100%); 
background: -o-linear-gradient(top, #4569b2 0%, #4062a5 100%); 
background: -ms-linear-gradient(top, #4569b2 0%, #4062a5 100%); 
background: linear-gradient(to bottom, #4569b2 0%, #4062a5 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4569b2', endColorstr='#4062a5', GradientType=0); 
} 

#hamburger div { 
background-color: #fff; 
border: 1px solid #eee; 
border-radius: 2px 2px 2px 2px; 
height: 2px; 
margin-top: 3px; 
width: 90%; 
} 


nav { 
opacity: 0; 
left: 0px; 
top: 0px; 
position: fixed; 
z-index: 0; 
width: 70%; 
height: 100%; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
overflow-x: hidden; 
overflow-y: auto; 
background: #3e3c3d; 
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d)); 
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%); 
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%); 
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%); 
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0); 
}

主要内容是不是在所有运动。左侧面板主要内容应移动独立

来源

2015-02-23 asdfdefsad