大概的思路是，監聽螢幕高度的變化，每當螢幕高度變化時，就重新獲取螢幕高度，並且重新設定height.

• template

 <div
      id="maindiv"
      :style="{height:(screenHeight-80)+'px'}"
    >
      <keep-alive>
        <component :is="flags"></component>
      </keep-alive>
    </div>
    <v-footer class="footer"></v-footer>
    <router-view></router-view>
  </div>
 

• js

data () {
    return {
      // screenWidth: document.documentElement.clientWidth, // 螢幕寬度
      screenHeight: document.documentElement.clientHeight // 螢幕高度
    }
  },
  watch: {
    // 'screenWidth': function (val) { // 監聽螢幕寬度變化
    //   var oIframe = document.getElementById('maindiv')
    //   oIframe.style.width = (Number(val)) + 'px' // '120'是頁面佈局調整，可去除
    // },
    'screenHeight': function (val) { // 監聽螢幕高度變化
      var oIframe = document.getElementById('maindiv')
      // alert(this.$store.getters.screenHeight)
      oIframe.style.height = (Number(val) - 40) + 'px'
    }
  },
  mounted () {
    var _this = this
    window.onresize = function () { // 定義視窗大小變更通知事件
      // _this.screenWidth = document.documentElement.clientWidth // 視窗寬度
      _this.screenHeight = document.documentElement.clientHeight // 視窗高度
    }
  },