侧边栏超出高度滚动条不能滚动,菜单显示不完整解决办法

最新推荐文章于 2022-09-22 09:29:48 发布

我上辈子可能是个南瓜

最新推荐文章于 2022-09-22 09:29:48 发布

阅读量1.2k

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/leizixi/article/details/114888239

版权

当遇到侧边栏内容超出高度且滚动条无法正常滚动，导致菜单显示不完全的问题时，可以尝试通过CSS设置一个带有滚动条的div来解决。可以对滚动条进行样式定制，或者使用Vue的Element框架中的滚动条组件。需要注意的是，组件必须设定高度以避免显示问题。

摘要由CSDN通过智能技术生成

如果这个问题解决不了,说明框架用的多,css绝逼全忘了,说的就是我本人…

最能想到的就是添加滚动条的方式,把你需要滚动条的内容放在一个div里,给这个div加个类名,对应样式如下:

.sidebar-container{
   
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 220px;   
      overflow-y

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我上辈子可能是个南瓜

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript实现上下滑动的侧边栏

Sibmle

07-03

1262

这个是在很多网站中侧边导航栏有的功能，比如那种很招人烦的咨询广告，下面是一个简化版：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 2

利用 ElementUI 的＜el-scrollbar＞＜/el-scrollbar＞解决div高度百分比时滚动条不生效的问题

Jacy_Lee_LDF的博客

08-13

6333

<el-scrollbar></el-scrollbar> 这个组件在ElementUI 的官方组件文档里面是没有提到的（百度发现的），也可以直接使用的，解决了困扰我很多天的问题，简单写了个例子，留着以后可能还用得着： html代码：（我的是vue项目） <div class="div1"> <div class="test1"> 这里是test1 div的内容（此div可有可无）这里不一定是div，也可以是其他的标签内容 ..

参与评论您还未登录，请先登录后发表或查看评论

侧边导航栏超出屏幕时的滚动问题

weixin_42768679的博客

04-18

3186

给导航栏加上 overflow-y:scroll overflow属性有四个值分别是visible、hidden、scroll、auto 如果希望有滚动的功能但隐藏滚动条的话。可以在css里添加： ::-webkit-scrollbar{ display:none; } -webkit-scrollbar是定义滚动条整体样式的， -webkit-scrollbar-thumb ...

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

lyhDream的专栏

06-10

7145

一、需求要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条 二、实现原理设置布局：position: fixed 设置overflow-y: scroll 三、效果图：四、实现代码 <!DOCTYPE HTML> <html> <header> <title>layout test</title> </header> <body> <style>

iframe引入的网站不能全屏宽度有滚动条_响应式网站的界面设计

weixin_29275257的博客

12-16

248

作为交互设计师，其实我们在设计响应式页面时，会发现了很多问题。响应式界面的很多细节应该是不那么容易被理解的。那么下面详细介绍响应式页面的基础内容。什么是响应式界面根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。为什么要设计响应式界面为何按老办法为...

html超过高度的没显示,CSS 设置的高度超出屏幕高度为什么没出现滚动条？

weixin_42244905的博客

07-01

1375

<li class="hidden waterBox1"><div class="waterBox2"><div class="waterBox3"><img src="images/2/0.jpg"></div></div>//重复.waterBox2里的内容。</li>.waterBox1{position: ...

带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义

09-25

"带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义"这一主题聚焦于前端开发中的交互设计，主要涉及以下几个核心知识点： 1. **伸缩菜单（Accordion Menu）**：伸缩菜单是一种节省空间、提升用户...

jQuery滚动条插件jqueryslimscrolljs

08-10

3. **动态高度**：无论内容多少，slimScroll.js 都能自动调整其高度，确保内容始终可见，并且只在需要时显示滚动条。 4. **可配置选项**：slimScroll.js 提供了一系列可配置参数，如滚动条的宽度、高度、颜色、速度...

微信侧边栏菜单根据高度放入更多怎么做

最新发布

06-08

记录学习碰到的问题：element UI导航菜单高度不能铺满问题

璐先生的博客

07-31

7387

在这里插入代码片@TOC 学vue+element时候发现导航菜单不能铺满浏览器通过最外层加个div，并把每一层高度设成100%，解决此问题最后效果新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区

导航栏过长处理

WHTGS的博客

10-28

1083

请教: 导航栏过长，而且显示区域的tab数目不固定，每个tab宽度不一致(相差较大)，如何通过左右箭头实现tab切换？js实现

cocos creator长列表优化之超出显示区域的隐藏，优化scrollView 列表，Grid列表，通过显示隐藏的方式优化DrawCall,可通用

github_38633141的博客

04-11

2294

cocos 长列表优化，通过隐藏显示的方式实现优化DrawCall

后台系统左侧菜单栏自适应屏幕分辨率添加滚动条

Twuof_1997的博客

07-06

1373

设计网页的过程中，有时需满足不能超出屏幕大小的规则限定，考虑到不停的屏幕有不同的SIZE尺寸。　　　这么一来我们就需要让它自己获取screen中的宽高度了。( height width ) 　　情景：　　　　一般网页内容过多时，右边出现滚动条来进行下滑查看网页内容，当我们一个页面中出现多个模块，页面规定只能显示在　　我们所看屏幕尺寸时（就是不能整体页面滚动），当内容超出时，我们可以设置部分...

超出盒子高度或者出现滚动效果

weixin_54902466的博客

09-22

2124

内容过多设置滚动条

绝对定位会影响overflow的效果和导航栏的制作详解（复制代码观看效果）

weixin_43342105的博客

10-03

1116

overflow和绝对定位会使overflow的属性失效绝对定位会使其脱离文档流的绝对定位的元素不总是被父级 overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候解决方法 1，overflow元素自身为包含块. * *2，overflow远古三的子元素为包含块 //...

Ant Design Drawer组件出现多滚动条

Cvory

04-08

1958

描述在Drawer抽屉中，内容有video，且内容高度超过可视区域时，出现多滚动条 显示如下：解决方案 Antd版本升级，我出现问题的版本为 4.12.3 现在最新版本为 4.15.0 最新版本中已解决

html select下拉菜单长度过长不出滚动条问题解决办法

weixin_30535843的博客

06-06

2038

<select class="form-control" data-edit-select="1" onmousedown="selectmousedown(this)" onblur="selectblur(this)" onchange="selectchange(this)" style="position:absolute;z-index:120"> </...

ant design 解决字体溢出和加横向滚动条

my_wings的博客

12-26

3804

style={{ marginLeft: 10, marginTop: 10,marginRight: 5, marginBottom: 10,overflow:“hidden”,overflowX:“scroll”}} overflow:"hidden” 解决字体溢出 overflowX:"scroll“ 加横向滚动条

5-5 xadmin 全局配置

huanglianggu的专栏

06-07

878

一，左上角Django Xadmin名称修改二、页面底部我的公司修改三、xadmin的主题修改四、把app的名称改成中文五、把左侧菜单收起来xadmin的主题修改发现：xadmin下设置“use_bootswatch = True”无效解决办法这边使用requests库来替代httplib2.1.安装 requests2.在./xadmin/plugins/themes.py 引入request...