Ensure that all divs have the same height and padding when resizing

Question

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness.

Below is my HTML structure:

<div class="mid-box-mid row"> 
                <!-- Featured Box 1 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                    </div>          
                    <div class="clearfix"></div>    
                </div>
  <!-- Featured Box 2 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                    </div>          
                    <div class="clearfix"></div>    
                </div>
  <!-- Featured Box 3 -->
                <div class="mid-box col-xs-12 col-sm-4">
                    <div class="skt-iconbox iconbox-top">       
                                <h4>Population<br><span>Health management</span></h4>
                    </div>      
                    <div class="iconbox-content">       
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
                      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.  
                    </div>          
                    <div class="clearfix"></div>    
                </div>
</div>

CSS styles applied:

.mid-box-mid{
    background-color:green;
}
.mid-box{
    background-color:red;
    padding:80px 40px;
}

Javascript code used for setting dynamic heights:

$('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());

$( window ).resize(function() {
  $('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});

Check out the live demo on FIDDLE

javascript jquery css

Answer 1

Answer №1

This is a frequently used script that accomplishes the task you mentioned.

// Custom Function for Equal Columns
jQuery.fn.equalCols = function () {
  $(this).css({'height' : ''}); // Reset height of columns
  var sortNumber = function (a, b) { // Array sorter function
    return b - a;
  };

  var heights = [];

  $(this).each(function () {
    heights.push($(this).outerHeight()); // Push each column's height into an array
  });

  heights.sort(sortNumber);

  var maxHeight = heights[0]; // Get the maximum height

  return this.each(function () {
    $(this).css({'height': maxHeight}); // Set all columns to the maximum height
  });
};

//Implementation Example
jQuery(function($){
  $('.mid-box').equalCols(); // Apply equal height function to selected columns
});

// Adjusts DIV size on window resize
$(window).resize(function () {
  $('.mid-box').equalCols();
});

.mid-box-mid{
  background-color:green;
}
.mid-box{
  background-color:red;
  padding:80px 40px;
  margin:5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mid-box-mid row"> 
  <!-- Featured Box 1 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
    </div>          
    <div class="clearfix"></div>    
  </div>
  <!-- Featured Box 3 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
    </div>          
    <div class="clearfix"></div>    
  </div>
  <!-- Featured Box 3 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.  
    </div>          
    <div class="clearfix"></div>    
  </div>
</div>

Answer 2

This is a frequently used script that accomplishes the task you mentioned.

// Custom Function for Equal Columns
jQuery.fn.equalCols = function () {
  $(this).css({'height' : ''}); // Reset height of columns
  var sortNumber = function (a, b) { // Array sorter function
    return b - a;
  };

  var heights = [];

  $(this).each(function () {
    heights.push($(this).outerHeight()); // Push each column's height into an array
  });

  heights.sort(sortNumber);

  var maxHeight = heights[0]; // Get the maximum height

  return this.each(function () {
    $(this).css({'height': maxHeight}); // Set all columns to the maximum height
  });
};

//Implementation Example
jQuery(function($){
  $('.mid-box').equalCols(); // Apply equal height function to selected columns
});

// Adjusts DIV size on window resize
$(window).resize(function () {
  $('.mid-box').equalCols();
});

.mid-box-mid{
  background-color:green;
}
.mid-box{
  background-color:red;
  padding:80px 40px;
  margin:5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mid-box-mid row"> 
  <!-- Featured Box 1 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
    </div>          
    <div class="clearfix"></div>    
  </div>
  <!-- Featured Box 3 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
    </div>          
    <div class="clearfix"></div>    
  </div>
  <!-- Featured Box 3 -->
  <div class="mid-box col-xs-12 col-sm-4">
    <div class="skt-iconbox iconbox-top">       
      <h4>Population<br><span>Health management</span></h4>
    </div>      
    <div class="iconbox-content">       
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.        
      Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.  
    </div>          
    <div class="clearfix"></div>    
  </div>
</div>

Answer 3

Answer №2

One way to ensure your divs stay synchronized in size is by utilizing the .resize function. This piece of code will be triggered whenever the screen size changes, maintaining the dimensions of your div elements.

$( window ).resize(function() {
  $('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});

To learn more about this functionality, you can visit the following link:

jQuery resize

Answer 4

One way to ensure your divs stay synchronized in size is by utilizing the .resize function. This piece of code will be triggered whenever the screen size changes, maintaining the dimensions of your div elements.

$( window ).resize(function() {
  $('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});

To learn more about this functionality, you can visit the following link:

jQuery resize

Ensure that all divs have the same height and padding when resizing

Answer №1

Answer №2

Similar questions

Utilizing the power of jQuery's .each() method to assign a function to numerous slideshow containers

Tips for arranging files within a directory in Netbeans IDE

Concealing and revealing information with jQuery and AJAX

Include an additional tag solely by using a specific set of keys predetermined in advance

What does the client perceive or not perceive? Node.js, JavaScript, MySQL

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Use Jquery to select the checkbox inside the td element and mark it as

How to dynamically modify a list box with JavaScript

Initiate the python script on the client's end

Inject a DOM event into a personalized form validator within an Angular application

Access and expand a bootstrap accordion with a hyperlink

Hide and display elements in a jQuery Mobile listview, but search functionality is disabled

Retrieve the content of a file and convert it into JSON or GeoJSON format

Troubleshooting: Issue with Nested jQuery UI Accordion Implementation

Why does xpath insist on choosing spaces instead of actual elements?

Ways to make JavaScript cycle through a set of images

The Vue.js route is not aligning with its defined path, causing a mismatch

Dealing with undefined properties in Javascript can cause errors

What is the best way to store settings values permanently during the installation process in a react-native application?

Encase all jQuery functionalities within a custom class