左右两栏布局，左固定，右边自适应方案及代码。

html代码如下，只是CSS不同：

<div class="wrap" >         <div class="left">左边宽度固定，高度不定</div>         <div class="right">右边自适应，高度不定</div>     </div>

<style>  .wrap{     font-size:0px;/*通过设置父元素字体大小为0；来消除div之间的空格。或者通过注释,<div>wwww</div><!--  --><div> wwww</div>*/     padding: 20px;     border:2px dashed red;     box-sizing: content-box;/*父元素是content-box模式*，为了计算右侧盒子的宽度，我们把子元素设置为border-box模式，这样宽度就是整个盒子的宽度了。*/  }   .left{     box-sizing: border-box;     display:inline-block;/*两个子元素都设置为inline-block*/      vertical-align: top; /*两个inline-block的盒子，必须两个子元素都顶端对齐。*/     background: green;     width:200px;     height:500px;     border:1px solid yellow;      }    .right{     box-sizing: border-box;     display:inline-block;      vertical-align: top;      width:-webkit-calc(100% - 200px);/*减号前后要有空格，否则无效，减去的宽度必须计算清楚*/     height:200px;     background: yellow;     border:1px solid pink;       }     </style>

<style>      .wrap{       box-sizing: content-box;       border:2px dashed red;       overflow: auto;/* 父元素清除浮动*/      }      .left{         float:left;         box-sizing: border-box;         width:200px;         background: yellow;      }      .right{         float:left;         box-sizing: border-box;         width:calc(100% - 200px);         background: pink;      }     </style>

<style>      .wrap{       overflow:hidden;/*父元素清除浮动*/       border:2px dashed red;       }      .left{         float:left;         width:200px;         background: yellow;      }      .right{         background: pink;         margin-left: 200px;/*不设置宽度，利用block元素的宽度填满父容器，并随着父容器的宽度自适应的流动特性。         block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。*/      }

<style>      .wrap{       position :relative;       border:2px dashed red;       min-height:300px;/*当左侧盒子的高度>右侧时，会超出父容器高度，所以要给父元素设置最小高度。*/       }      .left{        position: absolute;         width:200px;         height:300px;         background: yellow;      }      .right{         background: pink;         margin-left: 200px;         height:300px; /*高度是内容撑开，也可以自己设置。*/          /*不设置宽度，利用block元素的宽度填满父容器，并随着父容器的宽度自适应的流动特性。         block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。*/      }

<style>      .wrap{       overflow: auto;/*清除浮动*/       border:1px dashed red;       }      .left{       float:left;       width:200px;/*固定宽度200px*/       background: red;      }      .right{      background: yellow;      overflow: auto;/*形成BFC，此时不会与左边盒子重叠，代替了margin-left的作用。*/       }

<style>      .wrap{       display:flex;       align-items: flex-start;/*顶部对齐*/       border:1px dashed red;       }      .left{       width:200px;       flex:0 0 auto;       /*flex的项目设置，flex是如下三个的缩写flex: flex-grow（项目放大比例，默认值0） flex-shrink（项目缩小比例 ，默认值1）  flex-basis（默认值auto） */       background: red;      }       .right{      flex:1 1 auto;      background: yellow;        }     </style>

文章来源: 左右两栏布局，左固定，右边自适应方案及代码。