這篇文章主要介紹“vue設置height:100%無效怎么解決”，在日常操作中，相信很多人在vue設置height:100%無效怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue設置height:100%無效怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
App.vue文件
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>這時候設置height: 100%;是無效的，在chrome的Elements中發現height仍然是0px.
設置高度100%時，div的高度會等同于其父元素的高度。而上面中id為app的div（vue掛載的div）的父節點是body標簽，body標簽的父節點是html標簽。在默認情況下html和body標簽的高度為auto，而瀏覽器是不會自動給標簽添加高度的，所以html和body標簽就為0，自然子div的高度設置為100%就不起作用了。
此時應該在App.vue文件style中添加如下代碼：
html,body,#app{
height: 100%;
}Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
到此，關于“vue設置height:100%無效怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
