最近看到一个需求命题，要求让并排显示的2个未设置高度的DIV实现自适应相同的高度，本文简单的介绍一下实现方式，然后阿萌顺便附带写一个让多个并排DIV实现相同的功能的简单实例。

本文有3个问题部分，请大家不要看漏喽~~~~

原理很简单，简单提下就是做个判断，让高度最高的赋值给其余所有DIV高度。

先来看看实现2个DIV自适应相同高度的简单代码：

<script type="text/javascript">
function getHeight(id1,id2){ 
    var Ldiv=document.getElementById(id1);
    var Rdiv=document.getElementById(id2);
    if (Ldiv.offsetHeight>=Rdiv.offsetHeight){
        Rdiv.style.height=Ldiv.offsetHeight + "px";
    }
    else{
        Ldiv.style.height=Rdiv.offsetHeight + "px";
    }    
}
window.onload = function() {
    getHeight("div1","div2");
}
</script>

看吧，多么简单的代码，不过还要考虑多个DIV的情况，这样就不能仅仅用上面那么简短的代码了，咋们来看看多个DIV自适应是怎样的实现方式。

<script type="text/javascript">
function $id(id){        //ID对象获取
    return document.getElementById(id);
} 
function getMoreHeight(){
    var divArray=new Array("div1","div2","div3","div4");    //定义需要自适应DIV的ID
    var max;
    for(i=0;i<divArray.length-1;i++){
        if($id(divArray[i]).offsetHeight>=$id(divArray[i+1]).offsetHeight){
            max=$id(divArray[i]).offsetHeight;
        }else{
            max=$id(divArray[i+1]).offsetHeight;
        }
    }
    for(i=0;i<divArray.length;i++){
        $id(divArray[i]).style.height=max;
    }
}
window.onload = function(){
    getMoreHeight();
}
</script>

主要利用数组存储多个ID，然后利用for循环，多次对比，得出max高度，然后循环赋值给每一个DIV的高度。

毕竟一排的DIV再多也不会多到哪去，这里也就不考虑算法的效率问题了，怎么短怎么搞。

不过上面的代码都没有考虑到有padding值的情况，就是当div的padding值不同的时候，会引起高度不一的情况。2个DIV的话直接自定义高度就好了，下面多个DIV的代码就要修改修改：

<script type="text/javascript">
function $id(id){        //ID对象获取
    return document.getElementById(id);
} 
function getMoreHeight(){
    var divA=new Array("h1","h2","h3");    //定义需要自适应DIV的ID
    var max;
    for(i=0;i<divA.length-1;i++){
        if($id(divA[i]).offsetHeight>=$id(divA[i+1]).offsetHeight){
            max=$id(divA[i]).offsetHeight;
        }else{
            max=$id(divA[i+1]).offsetHeight;
        }
    }
    for(i=0;i<divA.length;i++){
        $id(divA[i]).style.height=max-parseInt(styleOf($id(divA[i]), "paddingBottom"))-parseInt(styleOf($id(divA[i]), "paddingTop"))+'px';
    }
}
function styleOf(obj, attr){    //样式对象获取（兼容）
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
window.onload = function(){
    getMoreHeight();
}
</script>

考虑到padding的情况，那么就在获取offsetHeight高度的情况下，减去padding值就好啦。这里因为是高度问题，只要在设置高度的时候用max最大总高度减去padding-top和padding-bottom的值就好了。

另外获取style样式考虑到兼容性，特用一个函数来判断解决，这问题拖了我还几天（PS：忙），其实也可以用max高度减去style.height的高度，可以间接得到2个内边距的数值，但是个人来说还是喜欢直接获取。

代码就到这，如果发现有问题的地方或者还有需要拓展的问题，欢迎来留言~~thanks