When the page zooms in and out, the height of the el-table changes accordingly

1. Draw a vue surface, and want the el-table part of this page to change as the page is zoomed in or out.

Mounted(() => {
				window.onresize = function windowResize(){
					let that = _this;
					_this.tableHeight = window.innerHeight - 100 - 280  + "px";
				}
            })

 The above -100, -280 refer to the height of el-header, el-footer, and there is only one el-table in el-main.

   <el-header style="height: 100px;width: 100%;"></el-header>  
    <el-main  style="width: 100%;margin-top:0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;">	
        <el-table style="padding-top: 0px;padding-bottom: 0px;" :height="tableHeight">
        </el-table>
    </el-main>
     <el-footer style="height: 280px;width: 100%;position: fixed;bottom: 0px;"></el-footer>