您现在的位置是:首页 > 正文

react 表格高度自适应

2024-04-01 06:44:19阅读 2

scroll={{ y: 'calc(100vh - 表头与顶部的距离px)' }}


// 根据页面视口区域高度计算表格高度,以确定什么时候出滚动条
export function getHeight() {
  let clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight),
    scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  let showHeight = (clientHeight < scrollHeight && clientHeight) || scrollHeight;
  return showHeight;
}

      <Table
            className="components-table-demo-nested"
            columns={columns}
            expandable={{ expandedRowRender }}
            dataSource={data}
            scroll={{y:600}}
            // 输入特定的数字是能限制高度,但是对不同的屏幕尺寸适配不太好,因此可以使用动态计算         
               css3 calc() 方法实现:
            // scroll={{ y: 'calc(100vh - 表头与顶部的距离px)' }}`
            // scroll={{ y: showHeight * 期望所占屏幕比例 }}`
        /> 

1.vh/vw

vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

2. calc

calc是calculate的缩写,用来指定元素的长度。使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc是 css3提供的一个在css文件中计算值的函数:

用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 “+”, “-“, “*”, “/” 运算; calc()函数使用标准的数学运算优先级规则; calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

一般用来设置流式布局宽高,当然,可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

网站文章

  • Array.prototype.at()

    Array.prototype.at()

    看到MDN上Array有一个新的函数,但还在实验中,并没有正式开放 实际上在chrome浏览器上new一个数组,也是存在这个函数的。 at的含义就是快速定位数组中的第几项。比如我们不知道一个数组的长度...

    2024-04-01 06:43:40
  • 码农行业的术语,为啥又多,又难懂?

    什么是鲁棒。 什么是Predicate 什么协变,什么逆变 什么注入,什么反向控制 什么内聚,什么响应式 而且,猴子,竖子都能立山头,自己发明,创造新概念,新名词。 同一个概念,不同的英文,不同的解释,然后,重复的学习。 这个行业,什么时候能被一统江湖。 转载于:https://www.cnblogs.com/maoyan/p/10460556.html...

    2024-04-01 06:43:32
  • JAVA语言身份证校验位的计算

    用于身份证号校验位的计算import java.util.Scanner;public class ID_card {public static void main(String[] args) { System.out.println("请输入需验证的身份证号码的前17位:"); Scanner scan=new Scanner(System.in); int a=0; int r...

    2024-04-01 06:43:25
  • Toolbar中Menu不显示

    在Activity中使用如下代码来引入toolbar: @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.base_toolbar_menu,menu);

    2024-04-01 06:43:19
  • 生产企业原材料订购与运输的研究-数据处理课程设计

    生产企业原材料订购与运输的研究-数据处理课程设计

    生产企业原材料订购与运输的研究-数据处理课程设计

    2024-04-01 06:42:37
  • 字符串截取

    splice字符串截取,原数组不变 // 截取“周” 每周,6,09时45分59秒 let a = &quot;每周,6,09时45分59秒&quot; console.log(a.splice(1,...

    2024-04-01 06:42:30
  • CSP-J 2022 入门级 第一轮 完善程序(1) 第35-39题

    fac中的元素为:fac[0], fac[1], …, fac[fax.size()-1],接下来应该输出的是:n/fac[fax.size()-1], n/fac[fax.size()-2], …f...

    2024-04-01 06:42:23
  • vue在不同平台构建的问题

    最近换了mac m1芯片,让原本的项目出现了很多和平台相关的问题,最主要的问题就是m1芯片的cpu架构为arm架构,而Intel芯片cpu架构为amd架构最近在改以前在window系统下写的vue项目...

    2024-04-01 06:41:36
  • 动态规划基本要素

    动态规划性质: 1 最优子结构性质 2 子问题重叠性质 ----->该问题可用动态规划算法求解的基本要素1.最优子结构当问题的最优解包含了其子问题的最优解时,称该问题具有最优子结构性质。最优子结构...

    2024-04-01 06:41:30
  • C++ 11 -智能指针

    C++ 11 -智能指针

    什么是内存泄漏:内存泄漏指因为疏忽或错误造成程序未能释放已经不再使用的内存的情况。内存泄漏并不是指内存在物理上的消失,而是应用程序分配某段内存后,因为设计错误,失去了对该段内存的控制,因而造成了内存的浪费。内存泄漏的危害:长期运行的程序出现内存泄漏,影响很大,如操作系统、后台服务等等,出现内存泄漏会导致响应越来越慢,最终卡死。

    2024-04-01 06:41:23