在写项目的时候遇到这样一个问题，自定义的底部栏footer组件，当页面主内容不多时，底部栏不会在浏览器的低端，而是随页面到了中间甚至更靠上的位置。如图：

如何解决哩：

一般网页布局采用的是圣杯布局就是 头/身/脚的模式，采用flex布局即可解决

在引入footer组件的地方

<!-- 页面主体，将头部脚部作为组件传入 -->
<template>
  <div class="Site">
    <v-header></v-header>
    <main class="Site-content">
      <transition>
        <router-view></router-view>
      </transition>
    </main>

    <v-footer></v-footer>
  </div>
</template>

<script>
// 引入头部组件
import vHeader from "./header";
import vFooter from "./footer";

export default {
  data() {
    return {};
  },
  components: {
    vHeader,
    vFooter
  }
};
</script>

<style scoped>
/*   min-height 在页面中最低显示位置，自己根据需求调整 */
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
</style>

在footer.vue中

<!-- 页脚 -->
<template>
  <div>
    <div class="footer">
      <i>Copyright © 2020 好一只帅卤蛋的个人blog 版权所有 · 粤ICP备123442</i>
    </div>
  </div>
</template>

<script>
...
</script>
<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: aliceblue;
  padding-top: 180px;
}
.footer i {
  display: block;
  margin: 0 auto;
  position: absolute;
  color: #999999;
  text-align: center;
  padding-bottom: 24px;
  z-index: 2;
}
</style>

这样就可实现底部栏就算没有填充内容，也在浏览器的底部显示，有填充的话自动向下延申