在vue.js中寫新的components的時候，如果在新頁面中的模板中設(shè)置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>

這時候設(shè)置height: 100%;是無效的，在chrome的Elements中發(fā)現(xiàn)height仍然是0px.

設(shè)置高度100%時，div的高度會等同于其父元素的高度。而上面中id為app的div（vue掛載的div）的父節(jié)點是body標(biāo)簽，body標(biāo)簽的父節(jié)點是html標(biāo)簽。在默認(rèn)情況下html和body標(biāo)簽的高度為auto，而瀏覽器是不會自動給標(biāo)簽添加高度的，所以html和body標(biāo)簽就為0，自然子div的高度設(shè)置為100%就不起作用了。

此時應(yīng)該在App.vue文件style中添加如下代碼：

html,body,#app{ height: 100%;}

總結(jié)

以上所述是小編給大家介紹的vue中設(shè)置height 100%無效的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！