html高度自适应vue,vue+elementUI 实现内容区域高度自适应的示例

步骤很简单：

通过动态绑定属性给绑定高度，而高度通过 innerHeight 获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码

//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();

}

当然，还可以通过CSS3计算高度

.el-main {

height: calc(100vh - 70px);

}

以上就是vue+elementUI 实现内容区域高度自适应的示例的详细内容，更多关于vue+elementUI 实现内容区域高度自适应的资料请关注脚本之家其它相关文章！