VUE+Element 页脚固定底部
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
最终效果:
如果页面内容不足够长时,页脚固定在浏览器窗口的底部
如果内容足够长时,页脚固定在页面的最底部
实现方法:
以 VUE + Element 为例,Element有现成的布局容器 Container,只需要在最外层加上CSS属性 min-height: 100vh;
即可。
相关代码:
<template>
<el-container>
<!-- 顶栏容器 -->
<el-header>Header</el-header>
<!-- 主要区域容器 -->
<el-main>Main</el-main>
<!-- 底栏容器 -->
<el-footer>Footer</el-footer>
</el-container>
</template>
<script>
export default {};
</script>
<style>
.el-container {
min-height: 100vh;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)