在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é)點(diǎn)是body標(biāo)簽，body標(biāo)簽的父節(jié)點(diǎn)是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中添加如下代碼： <style> html, body, #app {height: 100%;padding: 0;margin: 0; } </style>

總結(jié)

以上是生活随笔為你收集整理的vue中设置height:100%无效的问题及解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。