javascript - jQuery to set div height -
with function below allows me set divs max height using specific class need adjust allow me set height of each row dynamically.
example:
the menuboxesparagraph
boxes within row
different height boxes within rowx
need able max
.menuboxesparagraph
height each "row" , able set row height based on whatever max
- might have .menuboxesparagraph box 298px high - highest box within specific row - row height should height
<div class="row"> <div class="menu1 menuboxesparagraph"> <p>content row</p> </div> </div> <div class="rowx"> <div class="menu1 menuboxesparagraph"> <p>content row x</p> </div> </div>
current jquery:
$(document).ready(function() { var max = -1; $('.menuboxesparagraph').each(function() { var h = $(this).height(); max = h > max ? h : max; }); $(".menuboxesparagraph").css("height",max+"px"); });
css:
.menuboxesparagraph{ width: 25%; border: 10px solid #000; margin: 2% 1% 0px 0px; padding: 5px; text-align: center; } .menuboxesparagraph:before, .menuboxesparagraph:after { content: ""; display: table; } .menuboxesparagraph:after { clear: both; } .menuboxesparagraph { zoom: 1; }
you set border
, padding
css .menuboxesparagraph
calculate it's actual height should use outerheight()
function. , undrestand want have rows, height set maximum height of .menuboxesparagraph
each row
should have function called.like fiddle
$(document).ready(function() { var max = -1; $('.row .menuboxesparagraph').each(function() { var h = $(this).outerheight(); max = h > max ? h : max; }); $(".row .menuboxesparagraph").outerheight(max+"px"); $(".row").css("height",max+"px"); var max1 = -1; $('.row1 .menuboxesparagraph').each(function() { var h = $(this).outerheight(); max1 = h > max1 ? h : max1; }); $(".row1 .menuboxesparagraph").outerheight(max1+"px"); $(".row1").css("height",max1+"px"); var max2 = -1; $('.row2 .menuboxesparagraph').each(function() { var h = $(this).outerheight(); max2 = h > max2 ? h : max2; }); $(".row2 .menuboxesparagraph").outerheight(max2+"px"); $(".row2").css("height",max2+"px"); var max3 = -1; $('.row3 .menuboxesparagraph').each(function() { var h = $(this).outerheight(); max3 = h > max3 ? h : max3; }); $(".row3 .menuboxesparagraph").outerheight(max3+"px"); $(".row3").css("height",max3+"px"); });
Comments
Post a Comment