vue项目中页面底部出现白边及空白区域错误的问题
更新时间：2022年08月25日 09:25:31 作者：斜影梧桐
这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue页面底部出现白边及空白区域错误问题
页面底部出现白边
类似于这种
我的把body，app，html里面的margin和padding都设置为0了但是还是有白边出现，最后找到的解决方法：
把app里面的全局背景图换到了body里面，然后白边就没了
看到一个解释是：白边可能是vue框架弄的
故解决办法是：把body也设置背景色
底部出现空白区域
检查内容区是否超出html区域
vue页面四周有白边的问题
在export default的代码中添加如下代码，设置body的属性margin:0和padding:0
beforeRouteEnter(to, from, next) {
// 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
next()
},
beforeRouteLeave(to, from, next) {
// 去除背景色
document.querySelector('body').setAttribute('style', '')
next()
},再刷新下看看，四周的白边已经消失了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于高频率Vue面试题以及答案的相关资料,需要的朋友可以参考下2023-02-02
Element-ui table中过滤条件变更表格内容的方法
下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vuex实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue如何在data中引入图片的正确路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
在Vue2中,可以使用WebSocket实时通信,本文主要介绍了vue2封装webSocket的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
elementui中的el-cascader级联选择器的实践
本文主要介绍了elementui中的el-cascader级联选择器的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了vue使用screenfull插件实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
Vue使用wavesurfer.js实现音频可视化的示例详解
WaveSurfer.js是一个开源的音频可视化库,用于创建交互式、可定制的波形,本文将为大家简单介绍了Vue如何使用wavesurfer.js实现音频可视化功能,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要为大家详细介绍了Vue3实现地图选点组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
vue3+element 分片上传与分片下载功能实现方法详解
这篇文章主要介绍了vue3+element 分片上传与分片下载功能实现方法,结合实例形式详细分析了vue3+element 分片上传与下载相关实现技巧与操作注意事项,需要的朋友可以参考下2023-06-06
最新评论