需求
如下图。其中表格部分：固定宽度，高度占满剩余空间
实现
flex 版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: #7fffd4;
text-align: center;
}
.body-wrap {
flex: 1;
display: flex;
/* 必要的，否则滚动条会依附在 html 元素上 */
overflow-y: auto;
}
.body-left {
/* display: flex;
flex-direction: column; */
background-color: #f58383;
}
.table-wrap {
/* 必要的 height 属性 */
height: 100%;
display: flex;
flex-direction: column;
}
.el-table {
flex: 1;
}
.body-right {
flex: 1;
text-align: center;
background-color: #a6f160;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<p>顶部盒子</p>
<p>widht: 100%; 高度: 自适应;</p>
</div>
<div class="body-wrap">
<div class="body-left">
<div class="table-wrap">
<el-table :data="tableData" height="100%" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
<div class="body-right">
<p>右侧盒子</p>
<p>width: 占满剩余宽度</p>
<p>height: 占满剩余高度</p>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const data = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}];
new Vue({
el: '#app',
data: function () {
return {
visible: false,
tableData: [...data, ...data, ...data, ...data]
}
}
})
</script>
</html>
注 1： 最外层高度占满剩余空间的容器（上例中的 div.left）必须设置 overflow-y: auto; 样式，否则滚动条不会依附在表格上，或出现双滚动条。
注 2： 当最外层高度占满剩余空间的容器不是列表的直接父容器时，需要为列表与其之间的容器设置 height 属性（如上例的 div.table-wrap） 。
注 3： 如果容器中的列表不是 el-table，而是 ul>li 之类的，则可能稍有不同，可能需要在层层容器上设置 overflow-y: auto; 样式。
注 4： grid + flex 版本同样需要注意以上几点 。
grid + flex 版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
display: grid;
height: 100%;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
.header {
grid-column-start: span 2;
background-color: #7fffd4;
text-align: center;
}
.left {
/* 必须设置，否则滚动条会依附在 html 元素上 */
overflow-y: auto;
min-width: 150px;
background-color: #f58383;
/* 当 div.left 为 el-table 的直接父容器时 */
/* display: flex;
flex-direction: column; */
}
.table-wrap {
/* 必须设置 height 属性，否则 el-table 无法固定表头 */
height: 100%;
display: flex;
flex-direction: column;
}
.right {
overflow-y: auto;
text-align: center;
background-color: #a6f160;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<p>顶部盒子</p>
<p>widht: 100%; 高度: 自适应;</p>
</div>
<div class="left">
<div class="table-wrap">
<el-table :data="tableData" height="100%" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
<div class="right">
<p>right-box</p>
<p>height 占满剩余高度</p>
<p>width 占满剩余宽度</p>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const data = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}];
new Vue({
el: '#app',
data: function () {
return {
visible: false,
tableData: [...data, ...data, ...data, ...data]
}
}
})
</script>
</html>