js实现高度自适应的两个div高度相等

这里有两个高度自适应的div：

点击按钮之后效果如下：

在线演示代码：http://codepen.io/Tom_chao/pen/JEqLXP/
CSS代码：

.left{
  width:100px;
  padding:10px;
  float:left;
  background:red;
  border:1px solid #ccc;
}
.right{
  width:100px;
  padding:20px;
  float:left;
  background:blue;
  border:1px solid #ccc;
}

JavaScript代码：

var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
var btn = document.getElementById('btn');
btn.onclick = function(){ 
  MakeHeightEqual();
}
function MakeHeightEqual(){
  if(leftDiv.clientHeight < rightDiv.clientHeight){
    leftDiv.style.height = rightDiv.clientHeight -20 +'px';
   }else{
    rightDiv.style.height = leftDiv.clientHeight -40 +'px';
   }
}

js判断语句中运用了一个运算公式，即：左div的content height+paddingTop+paddingBottom = 右div的clientHeight(content height +paddingTop+paddingBottom)，这一点需要注意。