不同设备自适应高度(滚动条)
简述:例如数据列表或者其他,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