css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
2024-06-18 19:21:17
一、需求
要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条
二、实现原理
设置布局：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布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动相关推荐
- 固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪
在一个商品展示列表中,一个需求是在一个正方形的方块中,按原比例展示商品图片,但是图片比例不定,需要居中显示,高度撑满,宽度多余的隐藏. 结构: imgOuter是固定容器,宽高都是120px: CSS ...
- css 剩余空间,CSS DIV高度撑满剩余空间
页面高度为百分百情况下,内容div实现自动撑满剩下的位置头部区域高度为110rpx,内容区域div实现自动撑满剩下的位置. 如果将div 高度设置为100%,会造成多出头部的110rpx,会有滚动条显 ...
- CSS技能点--元素高度占满视窗
点此查看全部文字教程.视频教程.源代码 本文目录 1. 背景 2. CSS设置满屏 1. 背景 我们经常会遇到,需要将网页内容铺满当前窗口的需求. 很多时候,通过CSS去控制比较麻烦,尤其是窗口高度是 ...
- 公众号h5页面高度撑满滚动底部有白边（解决方案）
https://blog.csdn.net/m0_63108819/article/details/123994554https://blog.csdn.net/m0_63108819/article ...
- html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
- php设置页面最小高度,HTML_CSS布局中最小高度的妙用，最小高度可以设定一个BOX的最 - phpStudy...
CSS布局中最小高度的妙用 最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也 ...
- css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
- 【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
- css解决uniapp使用image标签图片无法撑满全屏问题
css解决uniapp使用image标签图片无法撑满全屏问题 文章目录 css解决uniapp使用image标签图片无法撑满全屏问题 前言 一.问题还原 二.问题解决 1.在解决问题之前有必要先来学习 ...
最新文章
- Eclipse实现hibernate反向工程：从数据库逆向生成实体类和hbm文件
- 数字化转型的路上，手握一张地图，但路还得自己走
- 使用 vue-cli 开发多页应用
- 关于epoll，select，poll的理解
- docker desktop ubuntu镜像_原创 | Docker入门，看了不理解，假一赔命
- java jaxb注解xmlnull_java – 将空值表示为xml jaxb中的空元素
- eclipse添加maven配置
- 泛型的意义与通配符理解
- 校园网ensp模拟搭建
- 攻防世界--logmein
- 微型计算机ccc认证的流程,计算机的3C认证办理以及流程
- 七夕节 看到很多停止更新的blog 莫名有点淡淡的忧桑
- python colorbar字体大小_如何更改colorbar上基数和指数的字体大小？
- QTreeWidget使用整理
- VSCode中配置Rust时报错：error: linking with `x86_64-w64-mingw32-gcc` failed: exit code: 1
- 【震惊】超市不能说的N个秘密：你已在不知不觉中上当
- 推荐系统- NCF（Neural Collaborative Filtering）的推荐模型与python实现
- c++游戏小技巧2：存读档
- 世界十大风景名胜[图]
- java工具多,[转帖]一个 Java 工具到底有多大？