现代浏览器滚动条默认为overflow:auto类型的,作用在如果尺寸不足一屏的话,不出现滚动条;如果超出,则出现滚动条。但是,这时候问题来了:
在写vue+elementui的项目时:
el-table的宽度设置为width:100% ,表格字段超过了一屏的宽度,出现滚动条。此时整个表格的右侧一直在跳动,起初,以为是那个循环写错了,检查发现并不是。如果不是js的问题,那可能就是css的问题了 。
1.先是在layout.less中找到了表格默认样式,优化css,起初我是将overflow:auto改为overflow-y:scroll,
发现页面不再跳动了。
但是overflow-y:scroll对于那么高度内容而变化的页面,就会出现其他的样式问题。
2.第一种方法不可取,就要找取最合适的解决方案,之后通过css3的calc函数,加一行代码就解决了
这里的意思是设置的宽度比100%的宽度少210px。具体少多少长度值,这个大家可以自行调节xxpx哈。
calc函数支持“+”、“-”、“*”、“/”运算,是用于计算长度值的
注意:“-”后面一定要空格