使用element UI中的Container 布局容器时显示两个滚动条如何解决

已于 2022-09-09 10:57:19 修改
阅读量5.2k 收藏 9
点赞数 9
分类专栏： css 文章标签： elementui vue
于 2022-04-22 17:01:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44479794/article/details/124349657
版权

在做一个门户网站时，使用了vue+elementUI，然后使用了Container 布局容器，但是发现会出现两个滚轮，这显然是不符合逻辑的。

​​​​​​​

 

解决方法：

如果需要隐藏main的滚轮则在 el-main中设置overflow-y: hidden;样式

如果需要溢出部分的内容并交给浏览器最外边的滚动条，则设置overflow: visible;

如果本篇文章对你有帮助，请点赞鼓励一下，谢谢

一个诡异的bug
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ElementUI v2.13 使用手册.pdf
04-28
2. **Container 布局容器**：用于构建复杂的布局结构，包含 header、footer、aside、main 等多个区域。 3. **Color 色彩**：定义了 ElementUI 的标准色板及其应用规范。 4. **Typography 字体**：定义了文本的大小、...
ElementUI v2.15 使用手册.pdf
02-28
- **Layout布局**：包括Container容器、Color色彩、Typography字体、Border边框、Icon图标、Button按钮、Link文字链接等。 - **Form表单组件**：包含Radio单选框、Checkbox多选框、Input输入框、InputNumber计数器、...
关于el-container隐藏滚动条的方法
Miketutu的博客
04-05 1002
2：有时会想更改element-ui的原始样式，但普通的样式更改时不起作用的。在需要更改的地方，在这地方的容器添加 ：：deep则可以更改样式。在el-main的标签中添加overflow-y：hidden；当使用el-container布局容器时，或出现两个滚动条。
element-ui中使用＜el-container＞在谷歌浏览器出现两个滚动条的解决方案
daniuge_99的博客
03-09 2203
vue2 element-ui
Element UI Container 布局容器 布满全屏, 头部和侧边栏固定 el-main可滚动
精通电脑科技的博客
10-13 3160
3、给el-container设置direction="vertical"，因为包含main和footer。2、给#app,html,body,.el-container一个height：100%1、需要给包裹的div一个height：100%二、头部和侧边栏固定 el-main可滚动。
使用了element UI页面出现两个滚动条
m0_56302604的博客
03-19 3268
当 el-main里面内容过多时，会出现多一个滚动条： 通过检查发现这里 el-main 的overflow用的是 auto ： 之前我设置了一个global.css文件用来设置一些全局的样式，所以可以在该文件里添加如下代码： global.css /* 解决内部滚动条 */ .el-main { overflow:visible; } ...
element-ui对话框组件自定义内容超出显示滚动条
agua001的博客
10-19 5795
需求是内容高度固定了，文字过多的话自动显示滚动条 html: <el-dialog title="<<某某用户协议>>" :visible.sync="userDig" width="800px" custom-class="userDig" center> <div class="userAgree"> <span class="userAgree_txt"&gt.
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
例如，在原文中提到的使用火狐浏览器时，通过优化样式调整滚动条可能无法兼容，使用 Element-ui 的 ElScrollBar 组件则可以避免此类问题。 2. ElScrollBar 组件的属性和用法 ElScrollBar 组件提供了几个关键属性，...
Element Plus 教程(beta版，适配 Vue 3.0 的 Element).pdf
02-28
Element Plus 是一个基于 Vue 3.0 的 UI 组件库，它是著名的 Element UI 框架针对 Vue 3.0 进行的升级版。Element Plus 保持与 Element UI 的设计理念一致，同时适配 Vue 的新特性，为开发者提供了一套现代化的UI...
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
10-16
在Vue模板中，我们使用`el-carousel`作为轮播容器，`el-carousel-item`作为每个头像的展示单元。`v-for`指令用于遍历`item.userInfo1`数组，显示每个用户的头像。`@click`事件监听器用于处理删除头像的操作，`:key`...
【实战】element布局容器中的el-main内容高度自适应，内容超出就出现滚动条
Shids_的博客
07-08 3918
【实战】element布局容器中的el-main内容高度自适应，内容超出就出现滚动条
使用element-ui中的container布局容器，内容撑开后，header和aside不固定
Liujiaxin828的博客
08-16 1370
使用element-ui中的container布局容器，内容撑开后，header和aside不固定
elementui实现滚动条
辉的范你学不来的博客
07-23 2302
这种方式整个table都会跟着移动，包括标题： <template> <el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer"> <div>........</div> </el-scrollbar> </template&gt
使用element-ui的滚动条
最新发布
Zing_ing的博客
07-26 3010
【代码】使用element-ui的滚动条。
vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变
热门推荐
weixin_44039043的博客
11-20 2万+
问题描述： vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变 # 解决方案： 第一步：最外层div样式 ： fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 width
【Java AWT 图形界面编程】Container 容器 ③ ( ScrollPane 可滚动容器示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
01-13 853
ScrollPane 可滚动容器示例
一行代码解决Element UI Container 布局容器中 头部和侧边栏固定 el-main可滚动
weixin_42539854的博客
03-11 2917
布局 <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> 方案 **只需要给内容区域的contain
el-container布局 顶栏和侧边栏固定，右侧主体内容区域可滚动
个人博客
09-03 3135
一行 height: calc(100vh - 90px); 结束战斗
vue - element ui Container的布局不同，会影响侧边栏是否跟随滑动
qq_43526329的博客
12-18 318
element ui Container的布局不同，会影响侧边栏是否跟随滑动
vue element ui 将页面分成两部分，一部分可滚动条滑动，另一个部分始终固定屏幕底部
06-07
可以使用 Vue 和 Element UI 的布局组件来实现将页面分成两部分，其中一部分可滚动条滑动，另一个部分始终固定在屏幕底部。 首先，可以使用 `el-container` 组件作为页面的最外层容器，将页面分成两个部分，如下所示： ```html <el-container> <!-- 可滚动的部分 --> <el-main> <!-- 这里放置可滚动的内容 --> </el-main> <!-- 固定在底部的部分 --> <el-footer> <!-- 这里放置始终固定在底部的内容 --> </el-footer> </el-container> ``` 接着，可以在 `el-main` 组件中添加一个滚动条，使其内部的内容可以滚动，如下所示： ```html <el-main style="overflow-y: auto;"> <!-- 这里放置可滚动的内容 --> </el-main> ``` 最后，可以在 `el-footer` 组件中添加一个固定定位的样式，将其始终固定在屏幕底部，如下所示： ```html <el-footer style="position: fixed; bottom: 0;"> <!-- 这里放置始终固定在底部的内容 --> </el-footer> ``` 这样就可以实现将页面分成两部分，一部分可滚动条滑动，另一个部分始终固定在屏幕底部的效果。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值