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前端打包的相关资料展开详细内容,需要的小伙伴可以参考一下，希望对大家有所帮助2021-11-11
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
我们不光要学会Vue的组件化实现过程,还要懂得组件数据发生变化,更新组件的过程,这篇文章主要给大家介绍了关于Vue3组件更新过程的相关资料,需要的朋友可以参考下2022-04-04
map()函数是在JS的数组中定义的,它返回一个新的数组,下面这篇文章主要给大家介绍了关于vue中map()快速使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了vue修改vue项目运行端口号的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文主要介绍了Vue项目部署到jenkins的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
前端的性能瓶颈那就是页面的卡顿,当然这种页面的卡顿包含了多种原因,下面这篇文章主要给大家介绍了关于前端虚拟滚动列表实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
实际上在学习过程中,你会发现eslint检查特别讨厌,这个时候我们需要关闭掉eslint检查,下面这篇文章主要给大家介绍了关于在Vue3项目中关闭ESLint的完整步骤,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
最新评论