左右两栏div布局，高度自适应

页面结构如下：

<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>

　　需要这样的效果：左右两边高度有内容多少，自适应



下面提供三种方式：

第一种： 使用display:table;

.container {
display: table;
width: 80%;
}

.container .left,
.container .right {
display: table-cell;
}

.container .left {
width: 20%;
background: pink;
}

.container .right {
width: 80%;
background: deeppink;
}

　　利用的table本身的自适应特性，兼容性好，容易使用

方法2：利用margin和padding

.container {
overflow: hidden;
width: 400px;
}
.container .left,
.container .right {
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.container .left {
width: 20%;
background: pink;
}
.container .right {
width: 80%;
background: deeppink;
}

　　这个原理是，左右的内容高度并没有跟着变化，只是由margin和padding撑出了一些地方，然后被隐藏了，当有一边的高度由内容撑起来之后，另一边的看似也跟着起来了，实际上那部分是padding

方法3：flex，兼容性IE10下面不能使用，手机端也有些兼容

.container {
display: flex;
width: 400px;
}

.container .left {
width: 20%;
background: pink;
}

.container .right {
width: 80%;
background: deeppink;
}