vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題
更新時間：2022年08月25日 09:25:31 作者：斜影梧桐
這篇文章主要介紹了vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue頁面底部出現(xiàn)白邊及空白區(qū)域錯誤問題
頁面底部出現(xiàn)白邊
類似于這種
我的把body，app，html里面的margin和padding都設置為0了但是還是有白邊出現(xiàn)，最后找到的解決方法：
把app里面的全局背景圖換到了body里面，然后白邊就沒了
看到一個解釋是：白邊可能是vue框架弄的
故解決辦法是：把body也設置背景色
底部出現(xiàn)空白區(qū)域
檢查內容區(qū)是否超出html區(qū)域
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()
? ? },再刷新下看看，四周的白邊已經(jīng)消失了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue是組件化開發(fā)框架,所以對于vue應用來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關于高頻率Vue面試題以及答案的相關資料,需要的朋友可以參考下2023-02-02
Element-ui table中過濾條件變更表格內容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2封裝webSocket的實現(xiàn)(開箱即用)
在Vue2中,可以使用WebSocket實時通信,本文主要介紹了vue2封裝webSocket的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
elementui中的el-cascader級聯(lián)選擇器的實踐
本文主要介紹了elementui中的el-cascader級聯(lián)選擇器的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了vue使用screenfull插件實現(xiàn)全屏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vue使用wavesurfer.js實現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個開源的音頻可視化庫,用于創(chuàng)建交互式、可定制的波形,本文將為大家簡單介紹了Vue如何使用wavesurfer.js實現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)地圖選點組件的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
vue3+element 分片上傳與分片下載功能實現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實現(xiàn)方法,結合實例形式詳細分析了vue3+element 分片上傳與下載相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2023-06-06