css 上中下三行佈局 4種方式

css 上中下三行佈局，上下高度固定，中間自動填充滿整個屏幕 的 4種方式

如下圖

另，左中右三列布局點這裏

1.absolute實現

 <section class="top-bottom absolute">
    <style>
      html,
      body,
      .absolute,
      article {
        height: 100%;
        overflow: hidden;
      }

      .absolute div {
        width: 100%;
      }

      .absolute .top {
        position: absolute;
        top: 0;
        height: 100px;
        background: red;
      }

      .absolute .middle {
        position: absolute;
        top: 100px;
        bottom: 100px;
        height: 100%;
        background: #0ff;
      }

      .absolute .bottom {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="middle">上下固定，中間自適應 absolute實現</div>
      <div class="bottom"></div>
    </article>
  </section>

2. flex實現

<section class="top-bottom flex">
    <style>
      html,
      body,
      .flex,
      article {
        height: 100%;
      }

      .flex article {
        display: flex;
        flex-direction: column;
      }

      .flex .top {
        height: 100px;
        background: red;
      }

      .flex .middle {
        flex: 1;
        height: 100%;
        background: #0ff;
      }

      .flex .bottom {
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="middle">上下固定，中間自適應 flex實現</div>
      <div class="bottom"></div>
    </article>
  </section>

3. display: table;實現

<section class="top-bottom table">
    <style>
      html,
      body,
      .table,
      article {
        height: 100%;
      }

      .table article {
        display: table;
        width: 100%;
      }

      .table article div {
        width: 100%;
        display: table-row;
      }

      .table .top {
        height: 100px;
        background: red;
      }

      .table .middle {
        background: #0ff;
      }

      .table .bottom {
        height: 100px;
        background: yellow;
      }
    </style>
    <article>
      <div class="top">top</div>
      <div class="middle">上下固定，中間自適應 table實現</div>
      <div class="bottom">bottom</div>
    </article>
  </section>

4. display:grid;實現

<section class="top-bottom grid">
    <style>
      html,
      body,
      .grid,
      article {
        height: 100%;
      }

      .grid article {
        display: grid;
        width: 100%;
        grid-template-rows: 100PX auto 100px;
      }

      .grid article div {
        width: 100%;
        display: grid-row;
      }

      .grid .top {
        background: red;
      }

      .grid .middle {
        height: 100%;
        background: #0ff;
      }

      .grid .bottom {
        background: yellow;
      }
    </style>
    <article>
      <div class="top">top</div>
      <div class="middle">上下固定，中間自適應 grid實現</div>
      <div class="bottom">bottom</div>
    </article>
  </section>