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

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

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

简述:例如数据列表或者其他,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

目录
相关文章
|
6月前
QT中 QPlainTextEdit自适应高度的问题(防止出现滚动条)
在QT开发过程中,经常使用到QPlainTextEdit来填入大量的文字,一般我们都会设置QPlainText的固定高度或者默认高度,但是随着文字的增多,就会自动出现滚动条,有时候我们可能需要QPlainText的高度随着自动适应文字的高度(即是说不需要出现滚动条)
457 0
|
4月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
1162 0
|
小程序
小程序隐藏滚动条但还能继续滚动
小程序隐藏滚动条但还能继续滚动
155 0
|
前端开发
内容滚动条和子 div 高度自适应
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
830 0
内容滚动条和子 div 高度自适应
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
|
JavaScript
div 滚动条自动保持在底部
div 滚动条自动保持在底部
412 0
|
算法
让一个div盒子在浏览器视窗中居中的算法
让一个div盒子在浏览器视窗中居中的算法
191 0
让一个div盒子在浏览器视窗中居中的算法