满屏带滚动条状态：
满屏不带滚动条状态：
窗口缩小显示：
代码：
<!doctype html>
<html>
<head>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0 40px;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.grid-head {
min-height: 100px;
max-height: 100px;
background: #BBE8F2;
}
.grid-body {
overflow: auto;
height: 100%;
display: flex;
flex-direction: row;
background: #D9C666;
}
.left-box {
height: 100%;
width: 20%;
min-width: 180px;
overflow: auto;
background-color: burlywood;
}
.right-box {
width: 80%;
display: flex;
flex-direction: column;
}
.search-area {
width: 100%;
background-color: cornflowerblue;
}
.detail {
height: 100%;
width: 100%;
overflow: auto;
}
.detail-table {
width: 100%;
height: 100%;
overflow: auto;
background: #7aa666;
}
.page {
min-height: 80px;
max-height: 80px;
width: 100%;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-head">
<!-- position: absolute -->
<div>head-top</div>
<div>固定高度：100px</div>
<div>head-bottom</div>
</div>
<div class="grid-body">
<!-- FLEX -->
<div class="left-box">
<div style="height:1000px">
<div>left-top</div>
<div>宽度：20%</div>
<div>最小宽度：120px</div>
</div>
<div>left-bottom</div>
</div>
<div class="right-box">
<!-- position: relative - > FLEX -->
<div class="search-area">
<div>search top</div>
<div>右侧box宽度：100%</div>
<div>本Div宽度100%；</div>
<div>search area 4</div>
<div>search bottom</div>
</div>
<div class="detail">
<table class="detail-table">
<thead style="background-color: #D9C666;">
<th style="min-width:50px">H1</th>
<th style="min-width:50px">H2</th>
<th style="min-width:50px">H3</th>
<th style="min-width:2150px">H4</th>
</thead>
<tbody>
<tr style="height:900px; background-color: #A9C777;">
<td>table-top</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr style="height:90px; background-color:aqua;">
<td>table-bottom</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</tbody>
</table>
</div>
<div class="page">
<div>footer</div>
<dvi>固定高度：80px</dvi>
</div>
</div>
</div>
</div>
</body>
</html>
