在新建的Vue项目中，使用height: 100;设置内容高度，设置的高度一直无效。高度设置为100%时，元素的高度应该和父元素的高度保持一致，但是一直设置到App.vue的高度为100%也不生效。
App.vue
<template>
<div id="app">
<!-- App.vue是根组件，最开始的页面就显示在这里。 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'vue2'
};
}
};
</script>
<style lang="less">
#app {
width: 100%;
height: 100%;
}
</style>
原因是在App.vue的页面中，#app设置高度为100%时，会查找#app的父元素高度。#app的父元素是body标签，body标签的父元素是html标签。在默认情况下，html标签和body标签的高度默认是auto，浏览器不会自动添加高度。所以html标签和body标签的高度为0，#app设置100%就无效。需要设置html标签和body标签的高度为100%。
App.vue
<template>
<div id="app">
<!-- App.vue是根组件，最开始的页面就显示在这里。 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'vue2'
};
}
};
</script>
<style lang="less">
html,body {
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
</style>
