一、需求
要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条
二、实现原理
设置布局：position: fixed
设置overflow-y: scroll
三、效果图：
四、实现代码
<!DOCTYPE HTML>
<html>
<header>
<title>layout test</title>
</header>
<body>
<style>
body {
margin:0px;
padding:0px;
}
.topNav {
position: fixed;
width: 100%;
height:56px;
background-color: green;
top: 0px;
left: 0px;
}
.leftNav {
position: fixed;
height: 100%;
width: 200px;
background: pink;
left: 0px;
overflow-y: scroll;
}
.content {
padding-left:200px;
background: yellow;
min-height:768px;
margin-top:56px;
}
h1 {
margin:0px;
}
</style>
<div class="topNav"></div>
<div class="leftNav">
<p style="height:80px;background:gray;text-align:center;margin:0px;">test1</p>
<p style="height:80px;text-align:center;margin:0px;">test2</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test3</p>
<p style="height:80px;text-align:center;margin:0px;">test4</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test5</p>
<p style="height:80px;text-align:center;margin:0px;">test6</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test7</p>
<p style="height:80px;text-align:center;margin:0px;">test8</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test9</p>
<p style="height:80px;text-align:center;margin:0px;">test10</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test11</p>
<p style="height:80px;text-align:center;margin:0px;">test12</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test13</p>
<p style="height:80px;text-align:center;margin:0px;">test14</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test15</p>
<p style="height:80px;text-align:center;margin:0px;">test16</p>
<p style="height:80px;background:gray;text-align:center;margin:0px;">test17</p>
<p style="height:80px;text-align:center;margin:0px;">test18</p>
</div>
<div class="content">
<h1>这是一条测试内容啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
<h1>这是一条测试内容</h1>
</div>
</body>
</html>方法二：
<!DOCTYPE HTML>
<html>
<head>
<title> flex </title>
</head>
<body>
<style>
body {
margin:0px;
padding:0px;
}
#app {
width:100%;
height:100%;
position:fixed;
background: pink;
}
#topnav {
width:100%;
height:56px;
background:#000000;
color: white;
padding-left: 20px;
float:left;
}
#content {
width: 100%;
height: 100%;
float:left;
display: flex;
}
#leftnav {
width: 300px;
height: 100%;
background:#0099CC;
overflow-y: auto;
}
#content1 {
width: 100%;
height: 100%;
background:#CCCCFF;
overflow-y: auto;
}
</style>
<div id="app">
<div id="topnav">
<h3>topnav</h3>
</div>
<div id="content">
<div id="leftnav">
<ol style="margin-bottom:60px;">
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_1</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_2</h2></li>
<li><h2 style="height:50px;background:#9966CC;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_3</h2></li>
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_4</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_5</h2></li>
<li><h2 style="height:50px;background:#9966CC;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_6</h2></li>
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_7</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_8</h2></li>
</ol>
</div>
<div id="content1">
<ol>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
</ol>
</div>
</div>
</div>
</body>
</html>效果图：
方法3：
<!DOCTYPE HTML>
<html>
<head>
<title> flex </title>
</head>
<body>
<style>
body {
margin:0px;
padding:0px;
}
#app {
width:100%;
height:100%;
position:fixed;
background: pink;
display: flex;
}
#topnav {
width:100%;
height:56px;
background:#000000;
position: fixed;
color: white;
padding-left: 20px;
}
#leftnav {
width: 300px;
height: 100%;
background:#0099CC;
margin-top:56px;
overflow-y: auto;
}
#content {
width: 100%;
height: 100%;
background:#CCCCFF;
margin-top:56px;
overflow-y:auto;
}
</style>
<div id="app">
<div id="topnav">
<h3>topnav</h3>
</div>
<div id="leftnav">
<ol>
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_1</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_2</h2></li>
<li><h2 style="height:50px;background:#9966CC;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_3</h2></li>
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_4</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_5</h2></li>
<li><h2 style="height:50px;background:#9966CC;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_6</h2></li>
<li><h2 style="height:50px;background:#CCCC00;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_7</h2></li>
<li><h2 style="height:50px;background:#339999;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_8</h2></li>
<li><h2 style="height:50px;background:#9966CC;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;">leftnav_9</h2></li>
</ol>
</div>
<div id="content">
<ol style="margin-bottom:60px;">
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
<li><h2 style="height:60px;background:#003366;border-radius:5px;border-style:solid;border-width:1px;margin-right:20px;color:white">this is content 1</h2></li>
</ol>
</div>
</div>
</body>
</html>效果图同上
版权声明：本文为lyhDream原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。