本文章是我一个实习两个月的练习生，在项目中遇到的问题，在此记录，防治以后再踩坑！！
Element ui 本身使用的Container 布局容器，组件采用 flex 布局。所以用了它的布局就可以做到宽度实时自适应，当我想试试高度是否自适应时发现一个问题，它的高度无法实时自适应！
高度实时自适应这个问题让我研究了好久，因为我做的是一个后台管理系统左边是一个竖着的导航栏右边是内容，我左边导航栏的高度是根据右边内容高度来变化的，现在开始实现高度实时自适应！！
这是我项目的布局：
上代码！
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
拿我的项目举个例子：我现在做的这个Main是一个带分页的大表格占满屏幕。
表格部分代码：
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:height="table" //绑定固定表头高度
:style="tableheight" //绑定style高度
:header-cell-style="{background:'#eef1f6'}"
>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="fullName" label="姓名"></el-table-column>
</el-table>Script代码：
<script>
export default {
data() {
return {
tableheight:{height:'',}, //表格高度
table:window.innerHeight - 180 //固定表头高度
}
},
methods: {
getHeight(){
this.tableheight.height=window.innerHeight-68+'px'; //获取浏览器高度减去顶部导航栏
}
},
created() {
window.addEventListener('resize', this.getHeight);
this.getHeight()
}
destroyed(){
window.removeEventListener('resize', this.getHeight);
},
}
</script>这里大家会看到为什么还要绑定固定表头的高度呢，那是因为当你拖动浏览器高度的时候如果不固定表头高度就会发现你看到的数据不完整，下面的数据就会被盖住。这时候有人问了，如果高度不是绑定的呢？如果高度不绑定通过计算那就是一个固定的高度无法实现自适应。所以固定表头绑定高度至关重要！！！
完成！！！
虽然这是一个表格的示例，但是我觉得其它的应该也可以适用，因为我的项目中右边还有一个是一个大tree占满浏览器，用同样的方法也是可以实现的。
网上有一种element ui 表格自适应高度的方法是：
这种实现表格自适应不是实时的如果你改变了屏幕的高度需要手动刷新页面才能达到适应屏幕的效果。
问题解决啦~~希望大家遇到和我同样的问题时，这篇文章能帮你解决问题，如果我哪里讲的不清楚欢迎留言，如果有更好的方法也欢迎讨论，喜欢的点赞哟ヾ(◍°∇°◍)ﾉﾞ
