基於vue解決 100vw 和 100vh出現滾動條的問題


width:100vw和height:100vh出現滾動條的原因在於

% 是相對於父元素的大小設定的比率,vw、vh 是視窗大小決定的。
window.innerWidth = 視口寬度 = 100vw // 打印1280
this.$refs.main.clientWidth = 父視圖寬度(body寬度) = 100% // 打印1263
所以視口寬度其實是包含了滾動條的寬度
解決辦法:
html,body,#app{
    margin: 0;
    padding: 0;
    height: 100%;
}
設置全局樣式表並在main.js中引入 
import "./assets/css/common.css";
 
注意:vue開發移動端不會出現此問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM