使用五种方法来实现DIV的一边固定一边自适应写法，并分析各自特点。
第一种（CSS3）：
.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
width: 100%;
height: 100%;
min-height: 300px;
line-height: 200px;
overflow: hidden;
margin: 30px 0;
position: relative;
}
.wrapper1 .custom{
width: 200px;
border-right: 1px solid white;
}
.wrapper1 .auto{
width: calc(100% - 201px);
}
.wrapper1 .custom, .wrapper1 .auto{
height: 200px;
float: left;
color: white;
background: black;
}
现在CSS3都已经普及了，移动端更是，通常使用CSS3较多，所以第一种就是利用CSS3来写了。
CSS3中新增一种新的属性 CALC ：
使用方法： width: calc(100% - 200px);
这一功能通俗易懂，简单的加减乘除谁不会啊，只需要了解盒子宽高（padding + margin + border），若使用border-box除外。
自适应盒子一个100%宽 - 固定盒子宽 = 自适应的宽。
第二种（CSS3）：
.wrapper2 .custom, .wrapper2 .auto{
height: 200px;
color: white;
background: black;
position: absolute;
top: 31px;
}
.wrapper2 .custom{
width: 200px;
border-right: 1px solid white;
left: 0;
z-index: 1;
}
.wrapper2 .auto{
left: 0;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
}
利用绝对定位来写，给父元素一个相对定位，固定与自适应盒子各一个绝对定位，当然你也可以只给第二个盒子。
没太多要点，需要注意的就是在box-sizing这里需设置borde-box。
脱离了文档流的DIV宽度100%是等于设备像素宽，所以需要给DIV增加一个padding值，那么增加了padding值的话，相当于是100%的宽度 + 200px padding宽度，这样导致DIV子元素居中不对称，所以使用box-sizing来辅助。
第三种（CSS3）：
.wrapper3{
display: flex;
flex: 1;
}
.wrapper3 .custom{
width: 200px;
height: 200px;
flex: none;
border-right: 1px solid white;
color: white;
background: black;
}
.wrapper3 .auto{
flex: 1;
color: white;
background: black;
}
同样的，CSS3新增了一种布局方式，display：flex；这种功能非常强大，若想学好H5，这个功能必定要会使用，可以不记，但要知道它有哪些辅助属性，具体可以通过W3C了解。
小弟不才，自己写了一下，但是做笔记的时候没写好，给自己写了几个坑，所以一定要试了才知道，不要一味的看，看了不动手或不用也记不住点击打开链接
使用方法：
给父元素设定： display： flex；flex: 1;
设定后，子元素默认为横向布局，无论里面的子元素是块还是行，具体不多做介绍...
flex: 1;代表分成几份，这里是1份。
固定的元素自定义宽度，自适应的设为flex: 1;宽度不需要设定，自适应的宽，当然也可以设auto。
第四种（table）：
.wrapper4{
display: table;
}
.wrapper4 .custom, .wrapper4 .auto{
display: table-cell;
background: black;
color: white;
}
.wrapper4 .custom{
width: 200px;
height: 200px;
border-right: 1px solid white;
}
.wrapper4 .auto{
width: auto;
height: 100%;
}
display: table；这种方式对于运用较少的人来说，属于冷门型的，若要想IE8下就不要用这种了。
理解：
给父元素定义table相当于是让父元素以块级的表格来显示，然后定义子元素，子元素的定义用display: table-cell; 此时的子元素相当于表格内的td元素，表格大家应该用的多，这个就不多做解释了。
缺点：
若父元素设了高度，那么子元素无论你设多高他都按照父元素的高度来定。
第五种（BFC）：
.wrapper5 .custom{
width: 200px;
height: 200px;
float: left;
border-right: 1px solid white;
}
.wrapper5 .auto{
height: 200px;
}
.wrapper5 .custom, .wrapper5 .auto{
background: black;
color: white;
}
是时候介绍一下压轴的方法了，简单、明了、“暴力美”，还TM接地气。
只需要给固定元素设宽高，重点是浮动，第二个就不用管了，只要设一个高就搞定！
贴上文档源码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
/* 第一种利用calc计算 */
.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
width: 100%;
height: 100%;
min-height: 300px;
line-height: 200px;
overflow: hidden;
margin: 30px 0;
position: relative;
}
.wrapper1 .custom{
width: 200px;
border-right: 1px solid white;
}
.wrapper1 .auto{
width: calc(100% - 201px);
}
.wrapper1 .custom, .wrapper1 .auto{
height: 200px;
float: left;
color: white;
background: black;
}
/* 第二种利用绝对定位 */
.wrapper2 .custom, .wrapper2 .auto{
height: 200px;
color: white;
background: black;
position: absolute;
top: 31px;
}
.wrapper2 .custom{
width: 200px;
border-right: 1px solid white;
left: 0;
z-index: 1;
}
.wrapper2 .auto{
left: 0;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
}
/* 第三种利用flex */
.wrapper3{
display: flex;
flex: 1;
}
.wrapper3 .custom{
width: 200px;
height: 200px;
flex: none;
border-right: 1px solid white;
color: white;
background: black;
}
.wrapper3 .auto{
flex: 1;
height: 200px;
color: white;
background: black;
}
/* 第四种表格 */
.wrapper4{
display: table;
}
.wrapper4 .custom, .wrapper4 .auto{
display: table-cell;
background: black;
color: white;
}
.wrapper4 .custom{
width: 200px;
height: 200px;
border-right: 1px solid white;
}
.wrapper4 .auto{
width: auto;
height: 100%;
}
/* 第五种BFC */
.wrapper5 .custom{
width: 200px;
height: 200px;
float: left;
border-right: 1px solid white;
}
.wrapper5 .auto{
height: 200px;
}
.wrapper5 .custom, .wrapper5 .auto{
background: black;
color: white;
}
</style>
</head>
<body>
<h2>第一种</h2>
<div class="wrapper1">
<div class="custom">
<p>我是自定义</p>
</div>
<div class="auto">
<p>我是自适应</p>
</div>
</div>
<h2>第二种</h2>
<div class="wrapper2">
<div class="custom">
<p>我是自定义</p>
</div>
<div class="auto">
<p>我是自适应</p>
</div>
</div>
<h2>第三种</h2>
<div class="wrapper3">
<div class="custom">
<p>我是自定义</p>
</div>
<div class="auto">
<p>我是自适应</p>
</div>
</div>
</div>
<h2>第四种</h2>
<div class="wrapper4">
<div class="custom">
<p>我是自定义</p>
</div>
<div class="auto">
<p>我是自适应</p>
</div>
</div>
<h2>第五种</h2>
<div class="wrapper5">
<div class="custom">
<p>我是自定义</p>
</div>
<div class="auto">
<p>我是自适应</p>
</div>
</div>
</body>
</html>