vue项目设置footer始终处于页面底部

就像上面这种页面高度不够footer在中间。
接下来给提供一种我自己在vue-cli脚手架搭建的项目用flex布局实现这种footer始终在底部的效果。
首先我们先了解页面的布局代码：vue项目的页面代码：

 <div class="wrapper">
     <div class="header">header</div>
     <div class="section">section</div>
     <div class="footer">footer</div>
</div>

css样式的的代码：

		 html,body{height: 100%;}
        .wrapper{display: flex;flex-direction: column;min-height: 100%;}
        .header{flex: 0;background: blue;}
        .section{flex: 1;background: #dedede;}
        .footer{flex: 0;background: red}

基本的布局就是这样，但是我们会发现按照这个样式写了，但是在我们的vue项目中还是没有footer始终在底部的效果。
我们查看元素会发现在我们入口文件的这个**id**为**app**的元素其实在页面中height还是没有100%；
这这里我们需要设置id为app的元素的高度为百分百但是我们直接设置height：100%是不起效果的。
我们需要这样写id为app元素的样式：

position:absolute;
top:0;
right:0;
bottom:0;
left:0;

这样我们才会发现我们的class为wrapper的元素的高度草撑满屏幕，实现footer始终在页面底部的效果。