[css]等高列的简单实现

又碰到css等高布局的问题，发现以前没有总结，这里再把基本原理写一下吧。

1.负边距控制法。

<div id="content">
    <div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
    <div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
    <div class="center">中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应</div>
</div>

把容器的overflow设为hidden，给每列都设置大的底部内边距，再用数值相似的负外边距消除这个高度。

#content{
  overflow:hidden;
}
.left,.right,.center{
  padding-bottom:9999px;
  margin-bottom:-9989px;
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
}
.left{
  float:left;
  width:200px;
  background-color:#eee;
}
.right{
  float:right;
  width:300px;
  background-color:#ddd;

}
.center{
  margin-left:230px;
  margin-right:330px;
  background-color:#999;
}

2.flex布局

同样的html结构。如果是三等分的话，用flex非常简单，align-items的属性默认值是stretch，所以就是等高的，上css代码：

#content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.left,.right,.center {
  flex: 1;
}
.left {
  order: 0;
  background-color: #eee;
}
.center {
  order: 1;
   margin: 0 10px;
  background-color: #999;
}
.right {
  order: 2;
 
  background-color: #ddd;
}

3.参考资料

• css-tricks