CSS实现等高布局

等高布局的实现方式有很多种这介绍两种非常实用的主流的方法，如下：

//html
<div class='box'>
    <div class='left'>
        <div class='bor'></div>
        dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf
    </div>
    <div class='right'>dsfdsfdsfdfsdf</div>
</div>

1. flex布局

.box{ display: flex; }
.left,.right{ flex: 1; }
//这种方式简洁明了，不考虑IE兼容性的话是最优的选择

2. margin/padding互相抵消

.box{ 
    overflow: hidden; 
    height: 200px; 
}
.left,.right{
    float: left;
    width: 100px;
    margin-bottom: -999em;
    padding-bottom: 999em;
}

这种方法有两个缺点是
1.无法添加下边框。可以用div模拟边框来实现。需要给每列中加个空的div来模拟。如此例

.box{
    position: relative;  //需要给容器元素添加相对定位
}
.bor{
    width: 100px;  //和列宽相同
    border-top: 1px solid red;
    border-top: absolute;
    bottom: 0;
}

2. 有时候我们并不想让多出的部分隐藏。

3. 绝对定位

//html 需要稍作变化
<div class="box">
  <div class="left">
    <div class=='bor'></div>
    <div class="content">
     adadasdadasdadadadaaddadasdadadadadasd
    </div>
  </div>
  <div class="right">aaaaaaaaaaaaaaaa</div>
</div>

//css
.box {
    overflow: hidden;
    position: relative;
    height: 200px;
    }
.left,
.right{
    position: absolute;
    width: 200px;
    top: 0;
    bottom: 0;
    border: 1px solid #000;
}
.right {
    left: 200px;
}
.bor{
    position: absolute;
    border-top: 1px solid #000;
    top: 100%;
}
.content {
    height: 100%;
    overflow: auto;
}

这种方式可以解决第二种方法的隐藏多余内容的缺点.