Vue + Element 页脚固定底部
在开发 Web 应用时,经常会出现需要将页面的页脚固定在页面底部的需求。本文将介绍如何使用 Vue 和 Element UI 实现这一功能。
问题简介
在我们的项目开发过程中,遇到了页脚不固定在底部的问题:比如以下界面:
解决办法
以 VUE + Element 为例,Element有现成的布局容器 Container,只需要在最外层加上CSS属性 min-height: 100vh;
即可。
相关代码:
<template>
<el-container class='home-container'>
<!-- 主页头部 -->
<el-header>
<div>
<img src='../../assets/top_logo.png' alt='' style='height: 20%;width: 80%' />
</div>
<div>
<img src='../../assets/top_kh.png' alt='' />
</div>
</el-header>
<!-- 主页导航栏 -->
<el-row>
<el-menu mode='horizontal' background-color='rgb(64, 112, 186)' text-color='white' class='menu'
active-text-color='#000000' :default-active='activeIndex' @select='handleSelect'>
<el-menu-item :key='index' v-for='(item, index) in menuList' :index='item.id.toString()'>
{{ item.name }}
</el-menu-item>
</el-menu>
</el-row>
<el-container>
<!-- 更变的内容区域 -->
<el-main class='main' >
<router-view class='box'></router-view>
</el-main>
</el-container>
<MyFooter></MyFooter>
</el-container>
</template>
<style scoped>
.home-container {
height: 100%;
}
.el-header {
background-image: url("@/assets/top_bk1.jpg");
}
.home-container {
min-height: 100vh;
height: 100%;
}
</style>
注意,在 ElContainer
中,我们依然使用了 min-height: 100vh
来保证页面内容至少占满整个视口高度。而 ElFooter
组件则会自动吸附到 ElContainer
的底部。
至此,我们已经成功地实现了 Vue + Element 的页脚固定底部效果。希望本文能够对你有所帮助!