當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动

發(fā)布時(shí)間：2025/3/21 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、需求

要讓左側(cè)邊欄固定，并且不會隨著頁面的滾動向上滾動，側(cè)邊欄內(nèi)容如果超出，可以顯示滾動條

二、實(shí)現(xiàn)原理

設(shè)置布局：position: fixed

設(shè)置overflow-y: scroll

三、效果圖：

四、實(shí)現(xiàn)代碼

<!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>這是一條測試內(nèi)容啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</h1><h1>這是一條測試內(nèi)容</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>

效果圖同上

總結(jié)

以上是生活随笔為你收集整理的css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Kafka入门教程（转载）
下一篇：解决jenkins 使用ssh插件执行脚