js代码完美实现并排显示的两个DIV高度保持一致（一个DIV高度自适应另一个DIV）

同一行并排显示的两个div盒子，根据一个DIV的高度确定另一个DIV的高度，是开发经常遇到的问题，如果DIV宽度指定后可以采用的方法有flex、padding-bottom或table-cell三种方法。如果宽度不指定就只能用JQ或者JS来处理。通过尝试，本文的js代码完美实现并排显示的两个DIV高度保持一致（一个DIV高度自适应另一个DIV变化）。

JQ代码：

判断控制页面初始时左右DIV的高度，通过定义hl和hr两个变量获取div的高度，然后比较hl和hr的高度，然后将较大的高度赋值给变量mh，再把变量mh的值赋值给两个DIV。缺点：要等页面加载完后才调整DIV的高度，并且如果有多行并排的DIV则效果很不理想。

<script type="text/javascript">
window.onload = function(){                                     //设置页面加载完成后运行JS
var hl = $("左侧div的ID或Class名").outerHeight();               //获取左侧left层的高度
var hr = $("右侧div的ID或Class名").outerHeight();               //获取右侧right层的高度
var mh = Math.max(hl,hr);                                       //比较hl与hr的高度，并将最大值赋给变量mh
$("左侧div的ID或Class名").height(mh);                           //将left层高度设为最大高度mh
$("右侧div的ID或Class名").height(mh);                           //将right层高度设为最大高度
}
</script>

JS代码：

下面的js代码是获取右侧div的高度，赋值给左侧div。定义变量hr，然后通过变量hr获取右侧DIV的高度赋值给mh，再定义变量hl，通过变量mh赋值给hl。缺点：js代码中没有加入高度比较判断，需要自己把高度大的div赋值给高度低的DIV，并且在有多行DIV并排时，第二行会不起作用。

<script type="text/javascript">
function height(){
var hr=document.querySelector("右侧div的ID或Class名");
var mh=hr.offsetHeight+'px'||hr.clientHeight+'px';
var hl=document.querySelector("左侧div的ID或Class名");
hl.style.height=mh;
}
height();
</script>

完美版js代码：

完美版js代码可以解决同一行的两个DIV宽度，高度不确定时，让一个DIV的高度随着另一个DIV的高度变化，并且完美解决了有多行DIV并排时，第二行不起作用的问题。下面的代码是获取右边div的高度赋值给左边div，可以通过交换【自定义变量1】和【自定义变量2】对应的DIV名，调整为把左边的div高度赋值给右边的DIV。

<script type="text/javascript">
var 自定义变量1 = document.querySelectorAll("左边DIV的ID或Class名");
var 自定义变量2 = document.querySelectorAll("右边DIV的ID或Class名");
function height(a, b) {
var 自定义变量3;
var 自定义变量4 = [];
for (var i = 0; i < a.length; i++) {
自定义变量3 = a[i].offsetHeight + 'px';
自定义变量4.push(自定义变量3);
}
console.log(自定义变量3);
for (var k = 0; k < b.length; k++) {
b[k].style.height = 自定义变量4[k];
}
}
height(自定义变量2, 自定义变量1);
</script>