在写项目的时候遇到这样一个问题，自定义的底部栏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>
这样就可实现底部栏就算没有填充内容，也在浏览器的底部显示，有填充的话自动向下延申
