elementui——el-tabs固定高度&内容超出高度可滚动

爱吃松果的美美

于 2021-07-01 15:21:20 发布

阅读量1.3w

点赞数 4

分类专栏：踩坑系列文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/118387660

版权

这篇博客主要介绍了如何在ElementUI的el-tabs组件中实现固定高度，并确保内容超出时可以滚动。通过设置外部容器.el-tabs--card和每个tab内容容器.el-tab-pane的高度，可以达到屏幕高度适应并实现滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}
.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}

!!!注意
.el-tabs–card是外层
.el-tab-pane是每一个tabs内容的容器，这这里设置的高度才是跟屏幕高度一样的

在这里插入图片描述