Equal Height Columns With Javascript Tutorial

View Demo

Place this script below in the <head> of your page, and then just apply the CSS class of "equal" to the columns that you would like to be equal in height. Thats it, couldn't be simpler! However, you may find that this simple script may not fully work as it should with your particular layout. If your like me, all my layouts have a min-height:100%, #header, #footer, etc. In which case, you may have more luck with the script dubbed Equal Height Columns With Javascript Plus located further down the page.

<div id="box1" class="equal"></div>
<div id="box2" class="equal"></div>
<div id="box3" class="equal"></div>

The Script

<script type="text/javascript">
matchColumns=function(){ 
     var divs,contDivs,maxHeight,divHeight,d; 
     divs=document.getElementsByTagName('div'); 
     contDivs=[]; 
     maxHeight=0;  
     for(var i=0;i<divs.length;i++){  
          // make collection with <div> elements with class attribute "equal"
          if(/\bequal\b/.test(divs[i].className)){ 
                d=divs[i]; 
                contDivs[contDivs.length]=d;  
                if(d.offsetHeight){ 
                     divHeight=d.offsetHeight; 					
                } 
                else if(d.style.pixelHeight){ 
                     divHeight=d.style.pixelHeight;					 
                } 
                maxHeight=Math.max(maxHeight,divHeight); 
          } 
     } 
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height=maxHeight + "px"; 
     } 
}  
window.onload=function(){ 
     if(document.getElementsByTagName){ 
          matchColumns();			 
     } 
} 
</script>

Equal Height Columns With Javascript Plus!

View Demo

Or...there is this script that Paul O'B was so kind to help me out with! This is basically the same script as shone above, but retooled and tweaked a little bit to take into account the height of the #wrapper, #header, and #footer. Place this script below in the <head> of your page, and then just apply the CSS class of "equal" to the columns that you would like to be equal in height. Thats it, couldn't be simpler!

The Script Plus!

<script type="text/javascript">
matchColumns=function(){ 
     var divs,contDivs,maxHeight,divHeight,d; 
     divs=document.getElementsByTagName('div'); 
     contDivs=[];  
     maxHeight=0; 
     for(var i=0;i<divs.length;i++){ 
          // make collection with <div> elements with class attribute "equal" 
          if(/\bequal\b/.test(divs[i].className)){ 
                d=divs[i]; 
                contDivs[contDivs.length]=d;  
          } 
     } 
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height="auto"; 
     } 
         // assign maximum height value to all of the container <div> elements 
         var pHeight = document.getElementById("wrapper").offsetHeight;
         var hHeight = document.getElementById("header").offsetHeight;
         var fHeight = document.getElementById("footer").offsetHeight;
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height=(pHeight - hHeight - fHeight) + "px"; 
     } 
}
window.onload=function(){ 

     if(document.getElementsByTagName){ 
                    matchColumns();             
 } 
} 
var currheight;
window.onresize = function(){
    if(currheight != document.documentElement.clientHeight)
    {
        matchColumns();    
    }
    currheight = document.documentElement.clientHeight;
}
</script>

Author Credit

ADVERTISE HERE