element ui 之el-footer沉底效果实现方案

如需转载请标明出处

一、前言

       大家好，我是Darcy(达希)，我目前正在学习前端，使用的组件库是element ui，今天和大家聊一聊如何实现el-footer沉底效果。

二、问题

      element组件库有一个container布局容器，其包含5种容器组件，分别是外层容器<el-container>、顶栏容器<el-header>、侧边栏容器<el-aside>、主要区域容器<el-main>和底栏容器<el-footer>。可以通过这5种容器组件实现一些常见的页面布局。我使用的布局方式如下图，由于页面主体内容高度不定，出现了两种情况。

 2.1 主体内容较少时，footer不在页面底部，而是跟在主体内容后，挂在页面中下部分，但是我们需要footer固定在页面的底部。但是如果我们直接将其固定，会出现第二种情况，见2.2。

2.2 主体内容较长时，如果之前设置了footer位置固定在页面底部，不管主体内容有没有浏览到最后，footer都会一直悬浮在页面底部。但是我们需要的是主体内容浏览完才展示footer。

三、解决方案

       这次我使用flex布局中的justify-content:space-between和min-height，来实现footer的沉底效果。代码如下：

<template>
  <div class="index">
    <el-container>
      <el-header class="header-parent-class">
        <div class="header-div-class">
          <span>header</span>
        </div>
      </el-header>
      <el-main class="main-parent-class">
        <div>
          <span>content</span>
        </div>
      </el-main>
      <el-footer>
        <div class="footer-div">
          <span class="footer-span">&copy; Darcy</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.index {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.el-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
}
.el-main {
  height: 100%;
  overflow: hidden;
}
.el-footer {
  display: flex;
  height: 4vh;
  width: 100%;
  align-items: center;
}

四、结束语

       以上就是我实现footer沉底效果的一些经验，分享给大家，希望和大家一起学习，也希望大家多多三连，给我鼓励！谢谢大家！

参考：https://www.jb51.net/css/675295.html