Css1: 两列布局，侧边栏定宽，左侧（主栏自适应）。

1: 两列布局，侧边栏定宽，左侧（主栏自适应）。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      div {
        box-sizing: border-box;
      }
      /* 
      方式一：
      给主栏元素设置相对其自身的位置，往左偏移200px;
      再给其设置，margin-left: 200px ,回归原位
       */
      .main {
        width:100%;
        margin:0 auto;
        height: 100%;
      }
      .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: aqua;
        padding: 30px;
      }
      .right {
        float:  left;
        width: 100%;
        height: 100%;
        background-color: aquamarine;
        margin-left: -200px;
        position: relative;
        left: 200px;
        padding: 30px;
      }

      /* 
      方式二：
      给父元素设置 margin-left: 200px;为左侧菜单栏，预留位置
      给左侧菜单栏，设置margin-left: -200px;填充父元素预留的位置
       */
      /* .main {
        width:100%;
        margin:0 auto;
        height: 100%;
        margin-left: 200px;
      }
      .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: aqua;
        margin-left: -200px;
        padding: 30px;
      }
      .right {
        float:  left;
        width: 100%;
        height: 100%;
        background-color: aquamarine;
        padding: 30px;
      } */
    </style>
  </head>
  <body>
    <div class="main">
      <div class="left">菜单栏</div>
      <div class="right">信息展示栏</div>
    </div>
  </body>
</html>