ColumnsIf you build a column based template using old-style HTML tables, you will find that the left and right columns will always be the same height, regardless of the content.

Doing the same with CSS is not as straight forward because the height of each column would either be set to "auto" (which can lead to unequal heights) or would be set to a specific height value (which is very restrictive).

Ideally you want a solution where no matter what the height of column A is, column B is always the same. Using jQuery and the HD-Anycode module, you can do just this.

 

Here is the CSS and HTML for two example columns...


<style>
#column-a {background-color: silver; width: 200px; float:left;}
#column-b {background-color: pink; width: 200px; float:left;}
</style>

<div id="column-a">text<br/>text<br/>text</div>
<div id="column-b">text</div>

 

Column A will be larger than column B because it contains two extra lines of content.

Here is the javascript code that matches the two heights.


<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
function showHeight(ele, h) {$("#column-a").css({height: h });}
$("#column-b").ready(function () {showHeight("div", $("#column-b").height());});
</script>

The First line loads jQuery.

 

The Third line grabs the current height from the div with the ID #column-a.

 

The Fourth line applies that height to the div with the ID #column-b.

 

A similar function can be prepared to match widths (by substituting showHeight with showWidth ).

 

Matching heights of divs by class

 

More recently I've been having to match multiple div heights, work out which is the tallest and then apply that height to all the divs of the same class.

But in order for it to work well on responsive screens it has to match the heights all over again when the screen is resized. The following script does just this...

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>
function stretch_height(thisClass){  
  jQuery("."+thisClass).css({"height":"auto"});
  var divs = document.getElementsByClassName(thisClass);
  var allDivsHeight = []; for (i = 0; i < divs.length; i++) {allDivsHeight.push(divs[i].offsetHeight);}
  tallest = Math.max(...allDivsHeight);
  jQuery("."+thisClass).css({"height":tallest+"px"});
}


window.onload = stretch_height('match-height'); 
jQuery(window).resize(function(){stretch_height('match-height');})
</script>

 

The last few lines calls the function with the class name (on initial page load then on window resize), so change match-height to whichever class name you are using.

 

The height is set to "auto" at the beginning of the function in order to reset the heights (otherwise the heights will increase on resize).

 

Hyde-Design 5/5 based on 625 0 5 customer reviews