SOURCE

<div class="main">
  <div class="fix header">header</div>
  <div class="fix section-1">时间</div>
  <div class="fix section-2">房间号</div>
  <div class="list">
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
    列表<br/>
  </div>
  <div class="fix tip">提示</div>
  <div class="fix footer">录音按钮</div>
</div>

html,
body {
  height: 100%;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}

.fix {
  flex-grow: 0;
  flex-shrink: 0;
}

.list {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  line-height: 40px;
}

.header {
  background-color: red;
  height: 50px;
}

.section-1 {
  background-color: green;
  height: 60px;
}

.section-2 {
  background-color: blue;
  height: 70px;
}

.tip {
  background-color: grey;
  height: 30px;
}

.footer {
  background-color: yellow;
  height: 50px;
}