element ui 之el-footer沉底效果实现方案
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
如需转载请标明出处
一、前言
大家好,我是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">© 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沉底效果的一些经验,分享给大家,希望和大家一起学习,也希望大家多多三连,给我鼓励!谢谢大家!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)