创建Vue项目后的初始化操作-解决Vue项目中盒子高度100%不生效问题

解决Vue项目中盒子高度100%不生效问题。

^{（由于最近create的项目有点多，记录一下）。}

方法一：对症下药

在项目根目录/public/index.html文件中的head里加入以下代码：

<style>
	html,
	body,
	#app {
	    width: 100%;
	    height: 100%;
	}
</style>

原理：我们的Vue文件中的div外面嵌套了三层标签，由外到内分别是html -> body -> div#app，这三个盒子任意一个高度不是100%，那我们设置高度100%都是不会生效的。

方法二：偏方

在你需要宽高为100%的div上加上以下样式：

your_div_id {
	  position: fixed;
	  width: 100%;
	  height: 100%;
}

这样该div的宽高就是100%了。

原理：position: fixed;意味着该盒子是一个根据屏幕位置固定的盒子，（不会随着你滚动鼠标翻动网页而发生位移），所以该盒子的位置是脱离了标准流布局的，所以它的大小不再受其父盒子影响，而是根据屏幕大小发生的变化。

缺点：本来想说可能会导致翻页出问题的，一想100%的高度好像也不用翻页…，暂时也没想到，看使用场景吧

说到position，其实将上面代码替换为position: absolute;也是可以的，但是前提是该盒子的父标签（祖标签）不能有带position的，原理也很简单：如果一个元素是绝对定位且其祖标签上没有带定位的，那么它将会一路向上寻找到根标签，然后以根标签为标准进行绝对定位（这也是“父相子随”的原理）。

补充

如果高度宽度100%之后，发现网页与外边框之间还存在微小的白色间隙，这时候只需要在方式一新加的style标签中加入以下代码即可：

* {
    margin: 0;
    padding: 0;
}