css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
生活随笔
收集整理的這篇文章主要介紹了
css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、需求
要讓左側邊欄固定，并且不會隨著頁面的滾動向上滾動，側邊欄內容如果超出，可以顯示滾動條
二、實現原理
設置布局：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>?
效果圖同上
總結
以上是生活随笔為你收集整理的css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kafka入门教程（转载）
- 下一篇： 解决jenkins 使用ssh插件执行脚