不同设备自适应高度(滚动条)

简介: 不同设备自适应高度(滚动条)

不同设备自适应高度(滚动条)

简述:例如数据列表或者其他,body,html的height设置100%不管用,div设置高度设置overflow-y虽然管用,但是换设备就会出现高度不一样的问题,用户体验不好。这里介绍一种完美的,el-table和普通的div均可以。

先说el-table,如果不切页只滚动条
<el-table
 ref="table"
 :height="tableHeight"
 :data="userDataList"
 style="width: 100%">
 </el-table>.         // dom这里copy第2、3行代码
data() {
   return {
       tableHeight: null,
   }
}
mounted(){
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
    //window.innerHeight:浏览器的可用高度
    //this.$refs.table.$el.offsetTop:表格距离浏览器的高度
    //后面的50:根据需求空出的高度,自行调整
},

上面代码就可以解决el-table,不切页不同设备垂直滚动功能

普通div不同设备垂直滚动
<div class="tBody" ref="table" :height="tableHeight"></div>  // copy元素不变
data() {
   return {
       tableHeight: null,
   }
}
mounted(){
     this.tableHeight = window.innerHeight - 80;     // 这里直接减数字,不然报错
},

另一种 使用vh

目录
相关文章
|
存储 缓存 前端开发
HTTP的缓存机制是什么?
HTTP的缓存机制是什么?
392 1
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
549 0
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
2739 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
移动开发 JavaScript 小程序
uView Collapse 折叠面板
uView Collapse 折叠面板
255 0
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
561 1
|
JavaScript 容器
Vue3折叠面板(Collapse)
该组件提供了一个高度可定制的折叠面板,支持多种属性设置,包括折叠面板数据、激活状态、禁用选项、边框风格、复制功能等,并可通过插槽进行进一步自定义。其丰富的样式控制选项使得面板能够适应各种场景需求。在线预览展示了不同配置下的效果。组件基于 Vue 3 开发,利用 `requestAnimationFrame` 模拟实现动画效果,并集成了按钮等其他自定义组件。
583 1
Vue3折叠面板(Collapse)
|
缓存 安全 应用服务中间件
nginx配置proxy_set_header
nginx配置proxy_set_header
|
JavaScript 内存技术
Vue动画——使用最新版Animate.css教程
Vue动画——使用最新版Animate.css教程
687 0
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后