CSS布局：左固定右自适应，上下固定中间自适应

1. 左固定右自适应

• BFC（块格式化上下文） -- 左边定宽float浮动，右边overflow

  // html部分：
  <div class="container">
      <div class="leftDiv">左边</div>
      <div class="rightDiv">右边</div>
  </div>
  // css部分：
  html,
  body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
  }
  
  .container {
      width: 100%;
      height: 100%;
  }
  
  .leftDiv {
      width: 300px;
      height: 100%;
      float: left;
      background-color: brown;
  }
  
  .rightDiv {
      width: auto;
      height: 100%;
      background-color: aquamarine;
      overflow: hidden;
  }
  

• float + margin --- 左侧float浮动，右侧外边距

  // 其他部分同上
  // css部分-rightDiv: 
  .rightDiv {
      width: auto;
      height: 100%;
      background-color: aquamarine;
      margin-left: 300px;
  }
  

• position + margin --- 左侧绝对定位，右侧外边距

  // 其他部分同第一个
  // css部分- container、leftDiv、rightDiv: 
  .container {
     width: 100%;
     height: 100%;
     position: relative;
  }
  
  .leftDiv {
     width: 300px;
     height: 100%;
     background-color: brown;
     position: absolute;
     left: 0;
     top: 0;
  }
  
  .rightDiv {
     width: auto;
     height: 100%;
     background-color: aquamarine;
     margin-left: 300px;
  }
  

• flex布局

  // 其他部分同第一个
  // css部分- container、leftDiv、rightDiv: 
  .container {
     width: 100%;
     height: 100%;
     display: -webkit-box;
     /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
     display: -moz-box;
     /* 老版本语法: Firefox (buggy) */
     display: -ms-flexbox;
     /* 混合版本语法: IE 10 */
     display: -webkit-flex;
     /* 新版本语法: Chrome 21+ */
     display: flex;
     /* 新版本语法: Opera 12.1, Firefox 22+ */
  
  }
  
  .leftDiv {
     width: 300px;
     height: 100%;
     background-color: brown;
  }
  
  .rightDiv {
     width: auto;
     height: 100%;
     background-color: aquamarine;
     -webkit-flex: 1;
     /* Chrome */
     -ms-flex: 1;
     /* IE 10 */
     flex: 1;
     /* NEW, Spec - Opera 12.1, Firefox 20+ */
     -webkit-box-flex: 1;
     /* OLD - iOS 6-, Safari 3.1-6 */
     -moz-box-flex: 1;
     /* OLD - Firefox 19- */
  }
  

• float + calc() 函数

  // 其他部分同第一个
  // css部分- container、leftDiv、rightDiv: 
  .container {
     width: 100%;
     height: 100%;
  }
  
  .leftDiv {
     width: 300px;
     height: 100%;
     background-color: brown;
     float: left;
  }
  
  .rightDiv {
     width: calc(100% - 300px);
     float: right;
     height: 100%;
     background-color: aquamarine;
  }
  

• display: table

  // 其他部分同第一个
  // css部分- container、leftDiv、rightDiv: 
  .container {
     width: 100%;
     height: 100%;
     display: table;
  }
  
  .leftDiv {
     width: 300px;
     height: 100%;
     background-color: brown;
     display: table-cell;
  }
  
  .rightDiv {
     height: 100%;
     background-color: aquamarine;
     display: table-cell;
  }
  

2. 上下固定中间自适应

• position定位

  //html部分：
  <div class="header">顶部</div>
  <div class="container">
      <div class="left"></div>
      <div class="center">
          中部
      </div>
      <div class="right"></div>
  </div>
  <div class="footer">底部</div>
  //css部分：
  html,
  body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      position: relative;
  }
  
  .header {
      width: 100%;
      height: 60px;
      background-color: cadetblue;
  }
  
  .container {
      width: 100%;
      height: auto;
      position: absolute;
      top: 60px;
      bottom: 80px;
  }
  
  .footer {
      width: 100%;
      height: 80px;
      background-color: #999999;
      position: absolute;
      bottom: 0;
  }
  
  .left{
      width: 100px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
  }
  .center{
      height: 100%;
      background-color: #cfcfcf;
      margin:0 100px;
  }
  .right{
      width: 100px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
  }
  

• flex布局

  //其他部分同第一个
  //css部分 - container、left、center、right
  .container {
     width: 100%;
     height: 600px;
     display: flex;
     flex: 1;
  }
  
  .left {
     width: 100px;
     height: 100%;
  }
  
  .center {
     height: 100%;
     background-color: #cfcfcf;
     flex: 1;
  }
  
  .right {
     width: 100px;
     height: 100%;
  }
  

• calc函数

  // html部分：
  <div class="header">顶部</div>
  <div class="container">
     <div class="center">
         中部
     </div>
  </div>
  <div class="footer">底部</div>
  // css部分：
  html,
  body {
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
  }
  
  .header {
     width: 100%;
     height: 60px;
     background-color: cadetblue;
  }
  
  .container {
     width: 100%;
     height: calc(100% - 140px);
     display: flex;
     
  }
  
  .footer {
     width: 100%;
     height: 80px;
     background-color: #999999;
  }
  
  .center {
     width: calc(100% - 200px);
     background-color: #cfcfcf;
     margin-left: 100px;
  }