左侧菜单栏不固定

已于 2024-08-08 10:53:05 修改
阅读量141 收藏
点赞数 2
文章标签： javascript 前端 vue.js
于 2024-08-08 10:51:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coder_xiaobai/article/details/141020762
版权

页面布局如下

<el-container class="container">
  <CommonAside></CommonAside>
  <el-container class="r-container">
    <CommonHeader></CommonHeader>
    <el-main><router-view></router-view></el-main>
  </el-container>
</el-container>

el-main的内容滚动时，左侧菜单栏也随着滚动，但是由于设置了菜单栏的高度为100%，当滚动超出页面可视高度时，菜单栏下方为空白。

解决：设置el-main的高度为calc(100vh - 60px)，其中60px是header的高度，这样el-main的高度固定后，就可以在自身范围内滚动，而不影响左侧菜单栏。

修改之后

云朵栖月
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面滚动式固定左侧菜单栏
cczsmile的博客
04-16 1367
思路 页面滚动时添加.activeFixed固定元素，需要获取scrollY，为了保持左侧菜单不移位，需要获取菜单到左侧的距离offsetLeft。 HTML <!--左侧导航--> <ul class="menu"> <li><a href="#"><b>This year's tuition</b></a&gt...
诺依框架，vue-element-admin，滑动固定根据左侧菜单栏展开闭合自动调整固定位置，监控左侧菜单栏展开与闭合
qq_40247817的博客
09-19 2814
诺依框架，vue-element-admin，滑动固定根据左侧菜单栏展开闭合自动调整固定位置，监控左侧菜单栏展开与闭合问题监控左侧菜单栏的展开与闭合功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 问题 需求场景，需要在诺依框架中，
Ant Design Pro 左侧菜单栏一直固定展开
zh0623的博客
03-21 3826
如题,因为项目需求需要加这个功能,所以查了下资料,只需要在两个地方设置一下 1.defaultSettings 文件添加openKeys:false 2.layouts 文件下BasicLayout.jsx文件添加openKeys={false} 两处设置就可以了
后台管理左侧菜单栏
L的博客
08-10 906
1: 折叠原理其实就是：把左侧菜单的宽度从 width = 208px->64px;2: 内容的距离左边位置：left = 208px->64px。3: 折叠安装是在头部组件，但是控制目标是：菜单和内容区域。
Vue左侧菜单栏显示问题
confidence冯瑶的博客
12-08 269
【代码】Vue左侧菜单栏显示问题。
左侧菜单栏控制右侧页面内容切换
01-18
在这个场景中，我们关注的是一个基于"jQuery + Bootstrap"的示例项目，它实现了左侧菜单栏控制右侧页面内容切换的功能，并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先，...
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
11-21
本示例将介绍如何利用HTML、CSS和jQuery来实现一个左侧滑动拉伸的导航菜单栏。 首先，HTML结构是基础。在提供的代码中，可以看到`<body>`内有两个主要的`<div>`元素：一个用于头部（`#header`），另一个用于左侧...
jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效
06-05
在这个特效中，左侧固定导航栏是页面加载时始终显示在屏幕左侧的菜单栏，无论用户滚动到哪里，它都会保持可见。这种设计可以确保用户在浏览页面时始终保持导航的可达性。实现这个效果，开发者通常会使用CSS的`...
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 9192
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1750
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 4579
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1096
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 630
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 131
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
echarts组件——饼图
weixin_42255789的博客
08-28 269
饼图
SpringBoot SSM vue在线作业考试系统
最新发布
yinjl123456的博客
08-30 251
使用技术: SpringBoot或SSM + Mybaits + Mysql + vue(前端)后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理。班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理。系统管理 管理员管理 考试管理。
Vue3搭建pinia环境
weixin_73060959的博客
08-28 890
在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。
页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏
qq_37161741的博客
08-30 87
【代码】页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏。
html添加左侧菜单栏
05-26
要添加左侧菜单栏，你可以使用HTML和CSS来实现。下面是一个基本的示例： ```html <!DOCTYPE html> <html> <head> <title>Left Sidebar Menu</title> <style type="text/css"> body { margin: 0; padding: 0; } #sidebar { position: fixed; width: 200px; height: 100%; background: #333; color: #fff; padding: 20px; } #content { margin-left: 200px; padding: 20px; } </style> </head> <body> <div id="sidebar"> <ul> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul> </div> <div id="content"> <p>This is the main content area.</p> </div> </body> </html> ``` 在这个示例中，我们首先创建了一个 `sidebar` div，它是我们的左侧菜单栏。我们使用CSS将其设置为固定位置，并指定了其宽度、高度、背景颜色和内边距。然后，我们在 `sidebar` 中创建了一个 `ul` 列表，并添加了一些菜单项。 接下来，我们创建了一个 `content` div，它是主要内容区域。我们使用CSS设置它的左边距为200像素，以便在页面上给左侧菜单栏留出空间。 最后，我们将 `sidebar` div 和 `content` div 放在 body 元素中。 你可以根据自己的需要修改 CSS 样式和菜单项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值