jQuery设置di​​v的高度 [英] jQuery to set div height

问题描述

使用下面的函数，我可以使用特定的类将div设置为最大高度，但是我需要调整它以允许我动态设置每一行的高度。

示例：

menuBoxesParagraph c> row 可能是一个不同的高度，然后 rowX 我需要能够得到 max .menuBoxesParagraph 每个行的高度，然后可以根据 max is - 我可能有一个.menuBoxesParagraph框是298px高 - 这将是该特定行中最高的框 - 行高应该是那个高度

 < div class =row> 
< div class =menu1 menuBoxesParagraph> 
< p>内容行< / p> 
< / div> 
< / div> 
 
< div class =rowX> 
< div class =menu1 menuBoxesParagraph> 
< p>内容行X< / p> 
< / div> 
< / div> 
   

当前jQuery ：

$ b b

  $（document）.ready（function（）{
 var max = -1; 
 $（'menuBoxesParagraph' ）{
 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; } 
  




解决方案

/ code>和 padding CSS到 .menuBoxesParagraph ，所以要计算它的实际高度你应该使用 outerHeight（）函数。并且因为我undrestand你想有行，它们的高度设置为 .menuBoxesParagraph 的最大高度，因此对于每个行您应该具有此函数called.like FIDDLE

  $（document）.ready（function（）{var max = -1; $（'。row.menuBoxesParagraph'）。 outerHeight（max;px）; $（。row）。css（height）; max +px）; var max1 = -1; $（'。row1 .menuBoxesParagraph'）每个（function（）{var h = $（this）.outerHeight（）; max1 = h& ;}）; $（。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）;}）;  

With the function below it allows me to set the divs to the max height using the specific class however I need to adjust it to allow me to set the height of each row dynamically.

Example:

The menuBoxesParagraph boxes within row could be a different height then the boxes within rowX I need to be able to get the max .menuBoxesParagraph height for each "row" and then be able to set the row height based on whatever the max is - I might have a .menuBoxesParagraph box that is 298px high - this would then be the highest box within that specific row - the row height should then be that 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 and padding CSS to .menuBoxesParagraph so to calculate it's actual height you should use outerHeight() function. and as I undrestand you want to have rows, that their height is set to maximum height of .menuBoxesParagraph so for each row you should have this 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");
});

这篇关于jQuery设置di​​v的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！