一、代码实例
使用页面
template：<v-foot></v-foot>
script：
import vHead from './Header.vue';
import vFoot from './Footer.vue'；
export default {
data(){
return {
collapse: false
}
},
components:{
vHead,vFoot
},
}
二、注意问题：
Footer.vue组件需要在页面的最低端，但是中间内容的多少会影响该组件的位置,position: fixed; bottom: 0;可以解决页面内容不足以撑满浏览器高度的情况，但是如果页面内容很多时会把内容覆盖，所以position:fixed方式不可取。
三、解决方案
手动设置出header与footer外的中间的content的高度，这是最低高度为 minHeight = 屏幕高度 - header高度-footer高度；这样，既能够使content内容不足时撑满浏览器高度，又不会再content高度过高时被footer覆盖！
<v-head></v-head>
<div class="content" :style="{minHeight:minHeight + 'px'}" >
<transition name="move" mode="out-in">
<keep-alive :include="tagsList">
<router-view></router-view>
</keep-alive>
</transition>
</div>
<v-foot></v-foot>
<!--示例中的290为header与footer高度之和-->
mounted(){
this.minHeight = document.documentElement.clientHeight - 290
var that = this
window.onresize = function(){
this.minHeight = document.documentElement.clientHeight - 290
}
},
