vue頁面高度填充，不出現滾動條

現在的需求是這樣：vue單頁工程化開發，上面有一個header，左邊有一個側邊欄，右邊內容展示。要求左邊側邊欄的高度，要填充滿整個頁面（除了header外，header：height:60px）--如圖

js控制：

export default {
data(){
return {
screenHeight: document.body.clientHeight-60,//減去header的60px
}
},
mounted () {
document.getElementById('layout').style.height=this.screenHeight+"px";//頁面初始化
window.onresize = () => {
return (() => {
this.screenHeight = document.body.clientHeight
})()
}
},
watch:{
screenHeight (val) {
this.screenHeight = val
document.getElementById('layout').style.height=this.screenHeight-60+"px";//檢測窗口的大小，並賦值
}
}

}

window.onresize ：js原生方法，用來監測瀏覽器窗口改變與否