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

article/2025/10/24 18:43:48

一、需求

要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条

二、实现原理

设置布局：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>

 

效果图同上


http://chatgpt.dhexx.cn/article/Ge9AN89W.shtml

相关文章

新年第一弹：js、css与高度（宽度）共享

新年第一弹：js、css与高度（宽度）共享

高度共享&#xff0c;是高度共享和宽度共享的总称。是笔者总结的一个针对某些问题解决的思路。并不是一个新的技术点或模式 —— 至少目前来说。甚至可能你已经在项目中用过类似的。 它的核心就是&#xff1a;降低 js 复杂计算和耗时操作在类似场景中的比重。 没啥说的&#x…
阅读更多...
这个 api 管理工具悄悄开源了，快来看看

这个 api 管理工具悄悄开源了，快来看看

说到开源的 API 管理工具&#xff0c;大家可能很容易想到 Postman 的妹妹 Postwoman,如果你也喜欢开源产品&#xff0c;那接下来这个工具你可不能错过~ Eoapi 是一款类 Postman 的开源 API 管理工具&#xff0c;它更轻量&#xff0c;同时可拓展。 支持基础的 API 文档和测试功…
阅读更多...
Apipost和 Apifox 哪个好用？两大国产API管理工具深度对比

Apipost和 Apifox 哪个好用？两大国产API管理工具深度对比

Apipost和 Apifox 哪个好&#xff1f;这两款国产API 管理工具的推广力度那叫一个猛&#xff0c;就鬼打墙似的&#xff0c;我在哪个公众号都能看到他们两家的推广。 我内心OS 就是&#xff1a; 只有充分内卷&#xff0c;才能够把厂商们的平均水平提上来&#xff0c;真正的强者…
阅读更多...
好用的开源 API 接口测试工具

好用的开源 API 接口测试工具

一提到 API 接口测试的工具&#xff0c;对于有经验的程序员可能会想起的是 Postman、 Jmeter、SoapUI,但众所周知&#xff0c;他们也会有一些缺点&#xff0c;导致他们在使用上体验不是特别好。 比如 Postman 的文档功能可能没那么强大&#xff0c;以及商业版定价太高了&#x…
阅读更多...
盘点好用的API管理软件，API管理开发工具Postman

盘点好用的API管理软件，API管理开发工具Postman

Postman是一款简单高效的api管理开发工具&#xff0c;你可以在组织良好的图形用户界面中管理&#xff0c;组织和测试API&#xff0c;并加速新应用程序的开发。Postman破解版为您提供了为API创建和组织HTTP请求的可能性&#xff0c;同时还集成了测试功能。您可以创建自定义方案并…
阅读更多...
【高效开发工具系列】API工具

【高效开发工具系列】API工具

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…
阅读更多...
开源免费API管理系统

开源免费API管理系统

项目地址&#xff1a; https://github.com/sharemen/api-admin 本项目是以XXL-API v1.1.1 为基础进行二次开发的 原始项目地址&#xff1a;https://github.com/xuxueli/xxl-api 在原功能基础之上增加了&#xff1a; 独立DEV环境的接口根地址默认添加guest账号&#xff0c;以…
阅读更多...
开源 API 管理工具，新版本 V1.3.0：前后置脚本、查看所有....

开源 API 管理工具，新版本 V1.3.0：前后置脚本、查看所有....

这是我们的第 2 篇月报&#xff0c;以后我会在这里和每一位来之不易的开发者分享产品故事以及产品进展。 我们的 1.3.0 版本功能伴随着炎热的天气如火如荼地发布了&#xff0c;UI 进行了升级&#xff0c;更清爽、更简单。 看得出改了哪里么&#xff1f; 发布了几个大功能&#…
阅读更多...
功能强大的国产API管理神器 Eolink，亲测好用

功能强大的国产API管理神器 Eolink，亲测好用

目录 前言一、Eolink 工具介绍1.Eolink是什么2.Eolink独创的DTDD3.API 全生命周期管理4.Eolink 的使用 二、Eolink 功能使用1.Eolink 基础界面详解2.用例一键测试提升效率3.状态码文档将API快速归类4.项目概览将所有数据一览无余5.团队协作提升开发测试效率6.支持一键导入各类其…
阅读更多...
推荐一个简单好用的开源 API 管理工具

推荐一个简单好用的开源 API 管理工具

一、什么是 Eoapi Eoapi 是一个可扩展的 API 开发工具。Eoapi 集合基础的 API 管理和测试功能&#xff0c;并且可以通过插件简化你的 API 开发工作&#xff0c;让你可以更快更好地创建 API。 二、特点 轻巧的 ❤️ 轻巧&#xff1a;采用简约的UI设计制作-简单的设计是最好的…
阅读更多...
8 款在线 API 接口文档管理工具；好用！

8 款在线 API 接口文档管理工具；好用！

1、Postman Postman是被大家所熟知的网页调试Chrome插件&#xff0c;我们常常用它来进行临时的http请求调试。幸运的是&#xff0c;Postman可以将调试过的请求保存到Collection中。形成的Collection就可以作为一份简单有效且支持在线测试的接口文档&#xff0c;使用同一账号登录…
阅读更多...
盘点 8 款好用的 API 接口文档管理工具

盘点 8 款好用的 API 接口文档管理工具

随着互联网的普及和发展&#xff0c;API 接口已经无处不在。它已经在 Web 应用程序、移动应用程序、云计算、物联网、人工智能等领域中得到广泛应用。 例如&#xff0c;在金融行业中&#xff0c;API 接口可以被用于构建支付服务、银行服务和证券交易服务等&#xff1b;在医疗行…
阅读更多...
Word基本操作之论文格式调整

Word基本操作之论文格式调整

Word文档 论文排版 页码 摘要目录罗马数字&#xff0c;正文阿拉伯数字 在摘要和目录页尾插入分节符&#xff0c;在罗马数字节和阿拉伯数字节中分别设置页码格式 光标定位在摘要和目录页尾处&#xff0c;点击菜单栏【页面布局】点击【分隔符】&#xff0c;选择【分节符】中的…
阅读更多...
论文写作格式设置

论文写作格式设置

做毕业设计时最麻烦的就是论文写好了却被告知格式不过关。 毕设封面&#xff0c;摘要&#xff0c;目录&#xff0c;正文、参考文献、致谢写在一个文档中打印起来方便 毕设论文格式要求如下 毕业设计&#xff08;论文&#xff09;写作规范 论文或设计说明书内容一般应由八个…
阅读更多...
学术论文的标准格式是什么？写论文有哪些小技巧？

学术论文的标准格式是什么？写论文有哪些小技巧？

看到这里的各位同学&#xff0c;恭喜你们成功通关&#xff01;现在距离一篇成功的论文就只有一步之遥啦&#xff01;想必完成前面的步骤已经耗费了你们大量的脑细胞&#xff0c;那么剩下的格式问题就交给我吧&#xff01; 学术论文的格式主要分为两大部分&#xff1a; 1. 内容…
阅读更多...
论文书写各类常见格式汇总Word版

论文书写各类常见格式汇总Word版

论文书写各类常见格式汇总&#xff08;Word版&#xff09; 这个是word版&#xff0c;以word2010为例&#xff0c;其他版本类似&#xff08;都2020年了&#xff0c;我还在用2010版&#xff09;1. Word样式及格式标记介绍1.1 样式1.1.1 查看当前文字的样式1.1.2 新建样式1.1.3 修…
阅读更多...
论文格式排版技巧（word版）

论文格式排版技巧（word版）

前言 由于本人在论文排版过程中走了不少弯路&#xff0c;耗费了许多时间&#xff0c;所以本文记录一下自己踩过的一些坑以及一点经验&#xff0c;希望能帮助到一些跟我一样的小白&#xff0c;一起看看吧。 首先&#xff0c;期刊论文一般都有自己的排版要求&#xff0c;比如页…
阅读更多...
word论文格式修改

word论文格式修改

目录 WORD1.自定义目录格式2.目录中有Tab3.修改图表目录格式4.引用连续的文献标注5.将word中unknown格式的图转成正常图片&#xff08;png&#xff09;6.word打出方框里的勾7.WORD打字有延迟8.Word插入图表名&#xff1a;图3-19.所有参考文献一次性上标10. 目录中编号与文字之间…
阅读更多...
MathType在word自动编号（学位论文格式）

MathType在word自动编号（学位论文格式）

步骤1:给论文各章节编号 第一步将鼠标放置在每章节的正文开始部分&#xff0c;第二步点击mathtype工具栏下的公式编号中的章&节&#xff0c;第三步点击插入分隔符&#xff0c;第四步点击插入分隔符后&#xff0c;会跳出Insert Chapter窗口&#xff0c;然后点击New Chapter选…
阅读更多...
论文中的格式设置

论文中的格式设置

1.以正文为首页添加页码&#xff0c;目录、封皮无页码 首先&#xff0c;鼠标光标放在正文第一行。 点击页面布局->分隔符->下一页&#xff0c;在当前页之前会出现一张空白页&#xff0c;若未出现空白页&#xff0c;则再次点击下一页&#xff0c;直到出现一张空白页为止。…
阅读更多...
推荐文章

Copyright @ 2022~2023