vue中设置height：100%无效

在写vue应用时，想让根节点满屏，设置height: 100%无效。

<template>
  <div id="app">
    我是根节点
  </div>
</template>

#app {
  width: 100%;
  height: 100%;
  background: red;
}

这样是无效的，那么问题出现在哪里呢？下面来解答。

查阅资料发现，给div设置高度100%时，div的高度会等同于其父元素的高度。而上面代码中id为app的div（即为vue挂载的div）的父节点是是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。

正确的做法是：

<template>
  <div id="app">
     我是根节点
  </div>
</template>

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

这样就可以达到想要的高度效果了