CSS：等高布局

方法一：使用数值非常大正padding-bottom与负margin-bottom

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

*{
  margin:0;
  padding:0;
}
#container{
  overflow:hidden;
}
#left{
  width:30%;
  background-color:aqua;
  height:300px;

  float:left;
  padding-bottom:9999px;
  margin-bottom:-9999px;

}
#right{
  width:70%;
  background-color:yellow;
  height:400px;

  float:left;
  padding-bottom:9999px;
  margin-bottom:-9999px;

}

• 首先，两列都是左浮动，且都设置了一个高度
• 其次，为两列均设置padding-bottom:9999px; margin-bottom:-9999px;，padding-bottom使得无限向下填充两列的背景色，margin-bottom则用于抵消这部分正值
• 最后，父容器设置为overflow:hidden，使得父容器的高度就是两列中最高的那一列的高度，而短的那一列不足的部分被padding-bottom所补充了。

这时两列的高度都是最高的那一列的高度，即此时设置的400px；

在线DEMO

---

方法二：flex
flex的align-items属性默认值为strech，也就是高度默认填满父容器高度。而父容器高度是最高的子元素的高度。因此最终的结果就是等高。

这种方式子元素甚至都没有任何特殊的设置。

<div id =