Sometimes we wish to create equal height columns in a webpage. Or it may require setting parent div height to the maximum from its children. Equalizing the height of divs assist designers to obtain a grid/column layout. Also, the same can fix the varying height issue due to rotation of sibling elements in a parent like a slider.
Usually, the height of each slide or child differs from their siblings in a slider with varying content. In such case, the parent div height either shrinks or grows when a slide changes. Which in turn, shifts elements below the parent up or down. This reflects a poor design, reduces smooth reading as well as leaves a bad impression on visitors.
Also check: Convert Bootstrap carousel to full screen slider.
5 Ways to Set Equal Height Columns or Maximize Parent Div
So setting the height of all matching divs to equal can solve the problem stated. Alternatively, you can set the height of the parent equal to the tallest child for the same. While writing the post, we had variable height slider in mind initially. However, the article can resolve the following similar concerns as well:
- Equal height columns in CSS
- Match height of two or more divs
- Setting minimum height from tallest child
- Expanding a parent div to the largest height of its children
- jQuery to get the largest height of children and apply to all
- The element with the maximum height from a set of elements
Let’s discover the potential ways that can set the height either of the parent or children. But before that, here is the HTML markup:
1 2 3 4 5 6 7 8 9 | <div class="outer-container"> <div class="inner-container"> <!--Element markup--> </div> <div class="inner-container"> <!--Element markup More markup--> </div> </div> |
You can treat each inner-container class as a column for a grid layout with divs of equal height. Or for a slider, it can be a slide with content inside. All divs stay visible in the grid while in the latter case, only one slide appears at a time. Let us start equalizing the height of divs using CSS.
1. CSS Overflow Technique
Setting overflow: auto to the parent div works for some people. While few designers claim for less known overflow: overlay. However, the overlay value doesn’t exist outside WebKit browsers.
2. CSS table-cell for Divs of Equal Height
Another solution to set equal height is displaying direct children as table-cell. Use the markup like this coupled with CSS rules:
1 2 3 4 5 6 7 8 9 | .outer-container { display: table; /*More CSS rules*/ } .inner-container { display: table-cell; /*More CSS rules*/ } |
If the rule doesn’t work then ensure that you don’t have set any float rule except the float: none.
3. Equal Height Columns or Divs – Flexbox
Browsers nowadays are supporting CSS flexbox. Similarly, most of the CSS frontend framework are using flexbox for responsive design, like Bootstrap. Use flexbox rules given below along with the HTML markup provided in the code block at the top.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .outer-container { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inner-container { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } |
These CSS rules will create a grid with equal height columns. If all children are spreading over one line then add the following two more rules to the outer-container class.
1 2 | flex-wrap: wrap; flex-direction: row; |
We’ve written a nice article to fetch data from database and display in responsive columns. This ready-to-use script is in PHP and can create the grid in a minute or two.
4. jQuery Loop for Equal Height Columns
This is a traditional approach. First, we create a variable to store adequate height and loop through all matching elements or children. Then update the variable if the height of the current element is bigger than the variable value. Finally, assign this value to the parent or children height if it is a slider. Or set to all matching divs for equal height columns.
1 2 3 4 5 6 7 8 9 10 11 12 | var maxHeight = 0, items = $('.inner-container'); items.each(function () { maxHeight = ($(this).height() > maxHeight ? $(this).height() : maxHeight); }); //Assign maximum height to children items.height(maxHeight); //Assign the largest height to the parent only $('.outer-container').height(maxHeight); |
5. Get Maximum Height and Assign to Parent/Children – jQuery
With the use of jQuery map() and Math.max you can retrieve the tallest element or the largest height.
1 2 3 4 | var maxHeightChild = Math.max.apply(null, $('.inner-container').map(function () { return $(this).height(); }).get()); |
The get() jQuery function returns the tallest element. While omitting it will give you the largest height from the set of matching elements or children. Now you can use this value as minimum height or just as the height for the parent.
1 2 3 4 5 6 7 | var maxHeight = Math.max.apply(null, $('.inner-container').map(function(){return $(this).height()})); //Set it as the height of the parent $('.outer-container').height(maxHeight); //Equal height columns by applying to child divs $('.inner-container').height(maxHeight); |
You can also assign this height to divs in a grid to set them as equal height columns as given in the code above. However, we recommend to use CSS ways, specially Flexbox to create divs of equal height. The jQuery functions are better to set the height of parent div same as the tallest child.
So which way did you find suitable, CSS or jQuery to equalize the height? Or do you have an opinion? Also, you might be using some other method, would you let us know then in comments?
This is good article.