如何将element-ui的footer跟随浏览器高度变化隐藏

HTML部分

  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer
        v-if="footerDisplay"
        height="50px">footer</el-footer>
    </el-container>
  </el-container>

data部分

  data() {
    // 这里存放数据
    return {
      // sidebarShow: true
      // 浏览器窗口高度
      screenHeight: document.body.clientHeight,
      // 下边框默认是存在的
      footerDisplay: true
    };
  },

VUE部分

  mounted() {
    //  window.onresize会在浏览器调整窗口大小时发生
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight;
        this.screenHeight = window.screenHeight;
        if (this.screenHeight < 500) {
          this.footerDisplay = false;
        } else {
          this.footerDisplay = true;
        }
      })();
    };
  },