html - css:向左导航滚动

Question

左面板和主要内容应该单独滚动。

以下是 fiddle 。

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

主要内容一点不动。左侧面板和主要内容应独立移动

Answer 1

只需从正文中删除这一行

position:fixed;

http://plnkr.co/edit/gmZSXYUu4aWMF4eAkewR

再次编辑

使标题的位置相对。

position:relative;

http://plnkr.co/edit/WqLFqtgZwkQA5vs3TUD9