display: table布局

table布局现在用的比较少（和flex布局很类似，个人感觉比flex好用，虽然不符合语义化标签的做法，但其兼容性较好）一般应用场景

1 顶部高度固定，剩余高度自适应

<div class="table">
        <div class="top">头部</div>
        <div class="content">
        	内容区
        </div>
  </div>

.table{
	width: 100%;
	height: 100%;
	display: table;
}
.top{
	width: 100%;
	height: 200px;
	border: 1px solid #eee;
	display: table-row;
}
.content{
	vertical-align: middle;
	display: table-row;
	background: honeydew;
	width: 100%;
	border: 1px solid #eee;
}

2 左边宽度固定 右边自适应

 <div class="table">
        <div class="left">左边</div>
        <div class="content">
        	内容区
        </div>
  </div>

.table{
	width: 100%;
	height: 100%;
	display: table;
}
.left{
	width: 200px;
	height: 200px;
	vertical-align: middle;
	border: 1px solid #eee;
	display: table-cell;
}
.content{
	vertical-align: middle;
	display: table-cell;
	background: honeydew;
	border: 1px solid #eee;
}

3 左边高度跟随右边高度变化（高度随着呢最内容区不固定高度）

  <div class="table">
    	<div class="des">
    		<div>aa</div>
		      <div>bb</div>
		      <div>cc</div>
    	</div>
    	<div class="rightDes">
    		<div>右边内容</div>
    		<div>ga</div>
    		<div>ga</div>
    		<div>ga</div>
	      <div>bb</div>
	      <div>cc</div>
	      <div>ga</div>
    		<div>ga</div>
    		<div>ga</div>
    	</div>
  </div>

.table{
	width: 100%;
	display: table;
}
.des{
	vertical-align: middle;
	display: table-cell;
	background: antiquewhite;
	border: 1px solid red;
}
.rightDes{
	vertical-align: middle;
	display: table-cell;
	background: antiquewhite;
	border: 1px solid royalblue;
}

注意：display: tabel-cell的元素，height和padding同时设置会出现问题 也会有时遇到些单词字符换行的问题 word-wrap:break-word（ white-space:pre-wrap;）兼容修复