• Skip to content
  • Skip to primary sidebar
  • About
  • Contact
  • Resources
  • Blog
    • Easy Digital Downloads
    • General
    • Genesis Framework
    • jQuery/JavaScript
    • Project Management
    • WordPress Functions
    • WordPress Plugin Development
  • Army Lessons

Scott DeLuzio

WordPress Development Tutorials

Get & Set Height of Divs

September 8, 2016 Scott DeLuzio Leave a Comment

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" );
    }
  });
});

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" ); } }); });

jQuery/JavaScript

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Come say hi!

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube

Tweets by scottdeluzio

My Products

Conditional Checkout FieldsFull Screen Background ImagesPrivacy WPQuick CheckoutWP1099WP-CRM System

I use affiliate links throughout this site and may earn a commission if you purchase through my links. I do not link to products or services that I do not trust, or use myself.
© 2019 · Scott DeLuzio · Built on the Genesis Framework