概述
步骤很简单：
通过动态绑定属性给<el-main></el-main>绑定高度，而高度通过 innerHeight 获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码
//defaultHeight是绑定的属性
<el-main :style="defaultHeight">
<router-view />
</el-main>
//注意：这里的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();
}
当然，还可以通过CSS3计算高度
<style>
.el-main {
height: calc(100vh - 70px);
}
</style>
以上就是vue+elementUI 实现内容区域高度自适应的示例的详细内容，更多关于vue+elementUI 实现内容区域高度自适应的资料请关注靠谱客其它相关文章！
最后
以上就是害羞小甜瓜为你收集整理的vue+elementUI 实现内容区域高度自适应的示例的全部内容，希望文章能够帮你解决vue+elementUI 实现内容区域高度自适应的示例所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复