Get & Set Height of Divs

I have a plugin with a number of content boxes on the plugin’s main page. The way the plugin is set up, other developers can add new boxes, or remove existing boxes. And I wanted to allow the boxes to be responsive so when viewed on smaller devices the user wouldn’t have to scroll across to see all the content.

To do this, I used a float:left; in the box’s CSS. This kept everything floating to the left until it ran out of screen real estate.

The downside to this solution, is the unknown height of the divs. Since anyone can add a div that could be taller than the other divs, it would make for a very funky layout by pushing the boxes in the next row down and line up all wacky. To fix this, I want to keep all the divs at the same height.

Fortunately, all of my content box divs have the same class, which makes this easy to do.

jQuery(window).on("load", function(){
  jQuery('.contentbox').each(function() {
    // Get height of each .contentbox div
    var divh = jQuery(this).height();
    // if divh > 315 the default height, set height of .contentbox to divh
    if (divh > "315") {
      jQuery(".contentbox").css('height', divh +"px" );
    }
  });
});