【实战】element布局容器中的el-main内容高度自适应，内容超出就出现滚动条

原创 已于 2025-06-09 16:51:06 修改 · 5k 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue

于 2022-07-08 15:19:31 首次发布
随着页面复杂性和内容多样性的增加，优化页面布局变得至关重要。本文介绍了如何利用element布局容器中的el-main元素，通过设置style=height: 0; flex-grow: 1;实现内容自适应高度，确保内容超出时依然能完美展示，从而提升用户体验。

前言

随着界面的日益复杂，页面内容的多样性也在不断增加。为了更好地满足用户的需求，我们需要掌握一些技巧来优化页面布局。本文将介绍如何使用 element 布局容器中的 el-main 自适应高度，让内容超出时也能完美展示。

给 el-main 加上 style="height:0;flex-grow:1;" 即可。

<el-main style="height:0;flex-grow:1;"></el-main>
Vue3 - Element Plus 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细代码）
🏆 前端领域优质创作者
04-03 6669
vue3，element-plus，el-menu，Menu菜单，Vue3+Element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue3实现左侧导航菜单可拖拽改变左侧导航宽度，vue3中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue3修改侧边导航栏宽度方法，vue3动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，vu
Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部
码农键盘上的梦
01-17 1207
在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下。在回调函数中处理路由变化的逻辑 使其滚动到顶部。最后，在组件销毁前，我们使用。路由时，将页面滚动到顶部，布局如下，使用ui组件为element-plus。，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的。参数表示要切换到的路由对象，，当路由变化后滚动到顶部。
Vue 前端页面多个滚动条 去掉el-main滚动条
m0_46664744的博客
01-11 2078
Vue 前端页面多个滚动条 去掉el-main滚动条
Element UI框架学习篇(二)
SSS4362的博客
02-09 3125
主要讲述的内容有 ①整体布局 ②按钮的几种用法
vue文件在＜template＞中使用多个＜el-main＞报错（已解决）
m0_51160509的博客
01-10 1798
1.原理 在外面用小盒子套起来。 在使用 `` 标签来包裹 `` 标签时，它们就像是在一个容器内部嵌套了多个 `` 标签。这样做是因为 `` 标签是一个常用的 HTML 容器元素，它可以用来包裹和组织其他元素。 当你想要在一个页面中插入多个 `` 组件时，你可以使用 `` 标签或其他容器元素来创建一个父容器，并在父容器中放置多个 `` 组件。这样，每个 ``
网站快速成型工具-Element UI
weixin_48143996的博客
12-06 7158
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
（亲测有效）固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条
Rose✿留白ق೨的博客
12-19 1万+
在elementui官网复制Container 布局容器布局，代码如下： <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-co
el-menu高度超出出现滚动条
浪里小博条
01-11 3330
el-menu高度超出，el-aside高度超出，el-aside取消滑动条
怎么设置el-row中的el-col高度自适应填充、
03-22
嗯，用户的问题是关于在Element UI中如何设置el-...- **内容溢出处理**：若内容超出容器高度，需通过`overflow: auto`添加滚动条。 - **浏览器兼容性**：Flex布局在现代浏览器中支持良好，但需测试低版本兼容性。 ---
el-aside 的高度能否自适应屏幕
最新发布
11-28
我们讨论的是在Vue.js项目中使用Element UI组件库时，如何让`<el-aside>`组件的高度自适应屏幕。 在Element UI中，`<el-aside>`是`<el-container>`的子组件，通常用于布局。要让`<el-aside>`高度自适应，我们需要...
el-tabs 高度自适应
01-23
为了使 Element UI 的 `el-tabs` 组件能够自动调整其高度以适应内容，可以采用 CSS 和 JavaScript 结合的方式来处理。具体方法如下： #### 使用 CSS 设置弹性布局容器 创建一个具有弹性的父级容器用于包裹 `el-tabs...
el-main的布局我里面设置的div 我如何设置 是他的可视化高度
09-03
另外，用户可能希望高度自适应，同时内容过多时出现滚动条。可以在div上设置`overflow: auto`。 总结：在el-main中设置div高度，关键是要确保el-main本身的高度已经被正确设置，然后通过flex或者百分比来使div...
如何让el-main内容溢出时可以滚动，并隐藏滚动条
m0_57742630的博客
07-03 3722
今天用vue3写项目时用element-plus时遇到了一个问题，el-main里面的内容溢出了但是窗口不能滚动，而且设计的样式滚动时滚动条时隐藏的，到处查阅后折腾了好久终于把样式写好了。选择器，可以定义滚动条的样式，并将滚动条的背景颜色和滑块颜色设置为透明，从而隐藏滚动条。请注意，这种方法只是通过样式隐藏了滚动条，但仍然可以通过鼠标滚轮或拖动来滚动内容。属性来显示滚动条，并通过CSS样式来隐藏滚动条。属性来显示滚动条，并使用自定义样式隐藏滚动条。内容溢出时可以滚动并隐藏滚动条，你可以使用CSS中的。
去除element-ui中 el-main的滚动条
m0_56063262的博客
08-07 1179
overflow：auto 表示如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。在网上查看半天都没一个人说到重点，坑踩的死死。最后终于自己找到原因！
CSS 实现内容区域高度自适应，超出有滚动条
hongtoushan的博客
05-25 4244
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { box-sizing: border-box; margin: 0; padding: 0; height:
使用element UI中的Container 布局容器时显示两个滚动条如何解决
weixin_44479794的博客
04-22 5756
在做一个门户网站时，使用了vue+elementUI，然后使用了Container 布局容器，但是发现会出现两个滚轮，这显然是不符合逻辑的。 解决方法： 如果需要隐藏main的滚轮则在 el-main中设置overflow-y: hidden;样式 如果需要溢出部分的内容并交给浏览器最外边的滚动条，则设置overflow: visible; 如果本篇文章对你有帮助，请点赞鼓励一下，谢谢 ...
element滚动条样式修改
weixin_48621384的博客
05-20 190
::-webkit-scrollbar { width: 8px; } //滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px; }
div 自适应高度 最大高度后滚动条显示
热门推荐
alwaysPursuing的专栏
02-09 2万+
背景：有这样一种情况：设置div的最大高度为xx%，想要自适应浏览器
vue+element实现内容区域高度自适应
cage7181的博客
09-29 8507
步骤很简单： 通过动态绑定属性给<el-main></el-main>绑定高度，而高度通过 innerHeight 获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码 //defaultHeight是绑定的属性 <el-main :style="defaultHeight"> &l...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值