Vue + Element 页脚固定底部

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 的页脚固定底部效果。希望本文能够对你有所帮助！