Setting the height of child elements as the parent

Many’s the time that I wish to have a list of all child divs the same height as their parents but the problem is that the parent doesn’t have a fixed digit height due to the fact that I don’t pre-hand know the height of children.

Let’s say you’re building an owl carousel and inside that carousel, you place the title and the excerpt. Of course, we can’t be sure that the title or the excerpt will only fill an exact number of lines so each one of the slides would have a different size and this is important when you want to style every single slide, for example giving each a border.

One obvious solution is the use of jQuery. First I find the tallest children and the set the other children to that. I am going to try this suggestion:

   var maxHeight = -1;

   $('.owl-item').each(function() {
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.owl-item').each(function() {
      $(this).height(maxHeight);
   }); 

Hey, it worked. Nice.

Leave a Reply

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