Menu
I have a set of div elements. In jQuery, I would like to be able to find out the div with the maximum height and also the height of that div. For instance:
<div> <div class="panel"> Line 1 Line 2 </div> <div class="panel"> Line 1<br/> Line 2<br/> Line 3<br/> Line 4<br/> </div> <div class="panel"> Line 1 </div> <div class="panel"> Line 1 Line 2 </div> </div> By looking at the above, we know that the 2nd div (with 4 Lines) has the maximum height of all. How do I find this out? Could someone please help?
So far I've tried:
$("div.panel").height() which returns the height of the 1st div.
420
The max-height CSS property sets the maximum height of an element.
The max-height property defines the maximum height of an element. If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property. If the content is smaller than the maximum height, the max-height property has no effect.
The max-height and min-height properties are used to set the maximum and minimum height of an element. This prevents the value of the height property from becoming larger than max-height or smaller than min-height. The value of the max-height and/or min-height property overrides height.
The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height .
Use .map() and Math.max.
var maxHeight = Math.max.apply(null, $("div.panel").map(function () { return $(this).height(); }).get()); If that's confusing to read, this might be clearer:
var heights = $("div.panel").map(function () { return $(this).height(); }).get(); maxHeight = Math.max.apply(null, heights); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
