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

来源：互联网发布：淘宝汽车用品店名大全编辑：程序博客网时间：2024/05/23 00:57

这里有两个高度自适应的div：
beforeClick:
点击按钮之后效果如下：
afterClick
在线演示代码：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)，这一点需要注意。

0 0