element ul 中 el-table高度实现自适应并出现滚动条。

751 阅读1分钟

表格的高度实现自适应,并出现滚动条!

一个页面布局,要求自适应。表格如果给了固定的高度,不同分辨率的显示器则会展示不一样,可能还会导致页面出现纵向滚动条。(下图右侧滚动条为表格滚动条,不是页面!!!) 7eb07d99b7e239956d43c8afcd27077.jpg 这种情况非常简单,页面分为三个部分,上面的按钮区域,中间的表格区域,下面的分页器区域, 给他们三个的父级设计flex布局并纵向排布,上面区域设置固定高度,下面区域设置固定高度,中间区域设置flex:1;

再给表格的高度利用calc计算一下高度,calc( 100% - 5px);这里的5px就相当于距离下边区域的距离,自己调整即可!!

019858364452ffc1126c6b3aeb6c20b.jpg