這篇文章主要講解了“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中設置height:100%無效怎么解決”的內容了，經過本文的學習后，相信大家對vue中設置height:100%無效怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網站欄目：vue中設置height:100%無效怎么解決
轉載注明：http://m.newbst.com/article8/jesdop.html

成都網站建設公司_創新互聯，為您提供定制網站、App設計、網站收錄、網站建設、網站改版、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯