最近在学vue框架， 在写单独一个页面组件（login) 的时候，遇到了页面的高度不能自适应浏览器的高度。
下面是我对这个问题的一些个人见解。
举个列子来说：
对应vue项目来说，App.vue是项目的根组件，其他的组件都是它的子组件或是子孙组件，我就以一个最简单的例子来阐述我遇到的问题，
问题：就如vue项目初始化后的结构
在app.vue（父组件）中包含了HelloWorld.vue(子组件)

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

而我想让HelloWorld.vue 占满全屏。
当时我无论是在app.vue 还是在 HelloWorld.vue上怎么设样式，都不能得到满意的结果。

最终还是借用jquery来解决这个问题（后话，之后找到了更方便的方式，在本文的最下面）
在vue中安装jquery

cnpm install jquery -S

在HelloWorld.vue上引入jquery
使用代码如下

<template>
 <div class="main">
	<span>hello</span>
 </div>
</template>

<script>
	import $ from 'jquery'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    // 实现APP的高度占满全屏
    $('.main').height($(window).height())
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.main{
		background-color: #00FFFF;
		/* height: 100%; */
	}
</style>

即可实现自适应占满全屏

在这加个补充：
想让子组件占满全屏，还有个更简单的方法，用不着借助jquery,只用css样式来实现：
即只需要在声明一个全局的css文件
我在我的scrc/css/global.csss全局的样式文件

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

在App.vue中进行的导入

import '@/assets/css/global.scss'

之后你你就可以在你想占满全屏的子组件中开心的使用height:100%来占满父组件的全部区域了