css左边固定，右边自适应。头部底部固定，下面自适应

左边固定，右边自适应方法一：

  <!-- 左边固定，右边自适应 -->
  <div style="height: 100%;">
    <div style="float: left;width:200px;background: pink;">left</div>
    <div style="margin-left: 200px;background: green;">right</div>
  </div>

左边固定，右边自适应方法二：

  <!-- 左边固定，右边自适应 -->
  <!-- <div style="height: 100%;display: flex;">
    <div style="width:200px;background: pink;">left</div>
    <div style="flex: 1;background: green;">right</div>
  </div> -->

上边固定，下面自适应。左边固定，右边自适应：

  <!--上边固定，下面自适应。左边固定，右边自适应 -->
  <!-- <div style="height: 50px;width: 100%;background: red;">header</div>
  <div style="display: flex;position: absolute;top: 50px;bottom: 0;width: 100%;">
    <div style="width:200px;background: pink;">left</div>
    <div style="flex: 1;background: green;">right</div>
  </div> -->