SOURCE

<div class="page-box">
	<div class="page-title">测试页面</div>
	<div class="page-header">里面内容有很多，会根据不同屏幕尺寸换行里面内容有很多，会根据不同屏幕尺寸换行里面内容有很多，会根据不同屏幕尺寸换行里面内容有很多，会根据不同屏幕尺寸换行</div>
	<div class="page-table">会自动填充满剩余高度</div>
</div>

html,body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.page-box {
	/* 这里至少需要保证，此容器的高度是铺满屏幕的 */
    padding: 20px;
    box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column; /* 主轴为垂直方向，起点在上沿。 */
    box-shadow: 0 0 3px orange inset;
}
.page-box .page-title,
.page-box .page-header {
    border: 1px solid red;
    margin: 5px 10px 0;
    padidng: 10px;
}

.page-box .page-table {
    display: flex;
    border: 1px solid blue;
    margin: 5px 10px 0;
    justify-content: center;
    align-items: center;
    font-size: 30px;
	flex-grow: 1; /* 可以是任意大于1 的值，其他相邻元素默认为0, 1 就会铺满剩余空间 */
}