在vue.js中寫新的components的時候，如果在新頁面中的模板中設置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%無效的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！