element-ui 左側導航菜單跟隨右側內容高度變化

1、說下本次產品需求

      （1）左側菜單的高度根據右側內容高度的改變而改變，且右側內容高度小於一整屏時左側顯示一整屏。

涉及公司隱私此次不進行截圖展示。

代碼部分截圖：

 

 

主要代碼展示

 

 

export default {
  data() {
    return {
      menuHeight: {
        height: "",
        background: "#fff"
      }
    }
  },
  created() {
    //動態調整左側菜單欄高度 document.documentElement.clientHeight
    var docHeight = document.body.scrollHeight;
    this.menuHeight.height = docHeight - 20 + "px";
    console.log(this.menuHeight.height, "this.containerHeight.height");
  }
};

 

menu組件中加入默認樣式

.el-menu{
    padding-top: 8px;
    height: 100vh;
  }

2、還有第二種需求

（2）整個項目不超過一屏展示，所以左側菜單也不能超過滿屏。（這個簡單，之后再補充，項目緊急沒空余時間）