ElementUI el-main高度问题

ElementUI el-main高度问题

原因：布局=> 头部、主页面、底部
el-main 需要充满屏幕

解决：1.public 中的index.html 中，清楚浏览器边距

<style>
      html,
      body,
      #app {
          height: 100%;
          margin: 0px;
          padding: 0px;
      }
  </style>

2.主页面布局代码：

<!--  -->
<template>
  <el-container style="height: 100%;">

    <el-header height="60px">
      <top-nav></top-nav>
    </el-header>

    <el-main :style="defaultHeight">
      <!--缓存想要缓存的页面，实现后退不刷新-->
      <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>

    </el-main>


    <el-footer
        style="display: flex;justify-content: center;align-items: center;background-color:cadetblue;height: 60px;color: #FFF;">
      Copyright © 2020 - 2021 . xx公司.All Rights Reserved
    </el-footer>


  </el-container>
</template>

<script>
import TopNav from '@/components/TopNav'

export default {
  name: 'index',
  components: {
    TopNav
  },
  data() {
    return {
      defaultHeight: {
        height: ""
      }
    };
  },


  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight - 120 + "px";
    }
  },

  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }

}
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #517859;
}

.el-main {
  background-color: #1359a0;
}


</style>

效果

头部组件代码：

<!--  -->
<template>
  <div>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item index="1" >主页面</el-menu-item>
    <el-menu-item index="2" >消息中心</el-menu-item>

  </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key) {
      // console.log(key);
      console.log(key);
      if (key==1){
        this.$router.push({path: 'home'})
      }
      if (key==2){
        this.$router.push({path: 'personal'})
      }
    }
  }
}
</script>
<style scoped>

</style>