爱编程
用代码编织自己的梦想

element ui 固定aside-header-footer

固定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>
赞(1)
本网站所发布的所有内容源于互联网搬运,本站资源仅供个人学习交流,不允许用于商业用途,否则法律问题自行承担。仅限于小范围内传播学习和文献参考,请您在下载后24小时内删除,如有侵权请第一时间联系站长删除,敬请谅解! E-mail:admin@quange.cc

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址