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

利用flex布局设置footer始终处于底部

相信很多前端开发工程师会遇到这样一个问题：在我们开发也免得时候总是会把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始终在页面底部的效果。