ElementUI el-main高度问题

ElementUI el-main高度问题

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

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

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

2.主页面布局代码：

  

    
      
    

    
      
      
      
        
      
      

    


    
      Copyright © 2020 - 2021 . xx公司.All Rights Reserved
    


  



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();
  }

}


.el-header {
  background-color: #517859;
}

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

效果 头部组件代码：

  
  
    主页面
    消息中心

  
  



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'})
      }
    }
  }
}