VUE+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>