element ui 固定aside-header-footer

quange 2022-6-4 745 6/4

固定aside-header-footer 只让main 主内容滑动

<template>
  <el-container>
    <NavAside></NavAside>
    <el-container direction="vertical">
      <NavHeader></NavHeader>
      <router-view></router-view>
      <NavFooter></NavFooter>
    </el-container>
  </el-container>
</template>

<script>
import NavAside from "@/components/home/NavAside";
import NavHeader from "@/components/home/NavHeader";
import NavFooter from "@/components/home/NavFooter";

export default {
  name: "NavHome",
  components: {NavFooter, NavHeader, NavAside}
}
</script>

<style scoped>
.el-header {
  padding: 0;
}

.el-main {
  padding: 0 16px !important;
  height: calc(100vh - 120px);
  overflow-y: auto;
}

.el-aside {
  line-height: 100vh;
}
</style>
- THE END -
Tag:
最后修改:2022年6月4日
0

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的所有下载文件均为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。

共有 0 条评论