vue elementui

使用的是elemntui Container 布局容器
由于头部el-header和底部el-footer是每个页面都有固定的,所以封装了公共组件头部和底部，现在需要把底部固定在页面的最下面

APP.vue

footer.vue

给 footer加一个 固定定位

这样应该可以解决

<template>
<div id="app">
      <app-header class="app-header"></app-header>
      <div class="app-main">
        <router-view></router-view>
      </div>
      <app-header class="app-footer"></app-header>
    </div>
</template>

<style>
#app {
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
}

.app-header {
  flex: 0 0 100px;
}

.app-footer {
  flex: 0 0 90px;
}
</style>