.equalOuterHeight()
Categories: CSS
.equalOuterHeight( [ includeMargin ] )
Subclass: ep
Plugin: ep.fn.equal
Description: Set the heigh of a outerHighest element in the set of matched elements to each of the set of matched elements.
-
.equalOuterHeight( [ includeMargin ] )
version added: 6.11.0includeMargin A Boolean indicating whether to include the element's margin in the calculation.
The .equalOuterHeight()
method equals the outerHeight to each of the set of matched elements
to the outerHeight from the the highest one.
The .equalOuterHeight()
method is related to the .outerHeight()
method.
-
Equal the outerHeight of all div elements.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
ep('div').equalOuterHeight();
Results:
<div class="box_1" style="height: 360px;"></div> <div class="box_2" style="height: 330px;"></div> <div class="box_3" style="height: 300px;"></div>
-
Equal the outerHeight of all div elements include the element's margin.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
ep('div').equalOuterHeight(true);
Results:
<div class="box_1" style="height: 420px;"></div> <div class="box_2" style="height: 360px;"></div> <div class="box_3" style="height: 300px;"></div>