标签：body border nta tom float position contain Fix containe
实现效果：导航栏固定定位，左侧菜单固定定位，左侧菜单滚动的时候不影响右侧内容，右侧内容可以自由滚动
两个demo的实现方法不一样
*{
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,li{
list-style-type:none;
}
.w1200{
width: 1200px;
margin: 0 auto;
}
.nav{
width: 100%;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
background: red;
z-index: 1000;
}
.nav li{
float: left;
margin-right: 10px;
padding: 20px 40px;
}
.container{
position: fixed;
left: 0;
top: 0;
bottom:0;
width: 100%;
height: 100%;
margin-top: 61px;
overflow-y: auto;
overflow-x: hidden;
}
.container .w1200{
position: relative;
}
.container .left{
position: fixed;
top: 61px;
bottom: 0;
width: 200px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.container .left ul li{
padding: 10px;
}
.container .right{
width: 100%;
padding-left: 220px;
}
.container .right ul li{
padding: 10px;
}
要点：滚动内容区域的父级必须设置height100%，以及html,body{height:100%}
html,body{
padding:0;
margin:0;
box-sizing: border-box;
height: 100%;
}
ul,li{
list-style:none;
}
#app{
overflow: hidden;
height: 100%;
}
.nav{
width: 100%;
height: 80px;
background: red;
position: fixed;
left:0;
top:0;
}
.container{
margin-top: 80px;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.w1200{
position: relative;
width: 1200px;
height: 100%;
margin: 0 auto;
}
.left{
position: fixed;
top: 80px;
bottom: 0;
z-index: 2;
width: 230px;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.right{
width: 100%;
position: absolute;
left: 0;
top: 0;
padding-left: 240px;
}
.list{
padding-bottom: 200px;
}
.list li{
padding: 10px;
}
标签：body border nta tom float position contain Fix containe
原文地址：https://www.cnblogs.com/zph666/p/9146645.html
