【 Vue + elementUI 】内容区域高度自适应

vue+elementUI 实现内容区域高度自适应

步骤很简单：通过动态绑定属性给绑定高度，而高度通过 innerHeight 获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！

<el-main :style="defaultHeight">
      <router-view/>
</el-main>

//defaultHeight是绑定的属性    
//注意：这里的defaultHeight必须是对象，不懂的可以去官网看下api
data() {  
	return {    
		defaultHeight: {     
			height: ""    
			}  
		};
	},
methods: {  
	//定义方法，获取高度减去头尾  
	getHeight() {    
		this.defaultHeight.height = window.innerHeight - 90 + "px";  
		}},
	created() {  
		//页面创建时执行一次getHeight进行赋值，顺道绑定resize事件  
		window.addEventListener("resize", this.getHeight);  
		this.getHeight();
		}

<style>
	.el-main { 
		height: calc(100vh - 70px);
		}
</style>