css常见布局-三栏布局-上下定高，中间自适应codePenhttps://codepen.io/zjhcn/full/

初始化css

.top, .bottom {
  height: 100px;
  background-color: #f00;
}

table

html

<table class="container table">
  <tr>
    <td class="top">top</td>
  </tr>
  <tr>
    <td class="center">
      这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
    </td>
  </tr>
  <tr class="bottom">
    <td>bottom</td>
  </tr>
</table>

css

/* 使用 table */
/* 无 */

position

html

<div class="container position">
  <div class="top">top</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="bottom">bottom</div>
</div>

css

/* 使用 position */
.container.position {
  position: relative;
  overflow: hidden;
}

.position .top, .position .bottom {
  position: absolute;
  left: 0;
  width: 100%;
}
.position .top {
  top: 0;
}
.position .bottom {
  bottom: 0;
}
.position .center {
  margin-top: 100px;
}

缺点
- position: absolute; 使元素脱离文档流，要在center手动加上 top的高度
- 由于margin重合问题需要在container形成BFC，center的margin才能正常把父元素顶开

calc

html

<div class="container calc">
  <div class="top">top</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="bottom">bottom</div>
</div>

css

.calc .center {
  height: calc(100% - 200px);
}

flex

html

<div class="container flex">
  <div class="top">top</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="bottom">bottom</div>
</div>

css

/* 使用 flex */
.container.flex {
  display: flex;
  flex-direction: column;
}
.flex .center {
  flex: 1;
}
.flex .left,.flex .rigth {
  flex: 0 0 100px;
}

grid

html

<div class="container grid">
  <div class="top">top</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="bottom">bottom</div>
</div>

css

/* 使用 grid */
.container.grid {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
}