Question

我的代码正常工作

$('document').ready(function(){

var max = Math.max.apply(null, $(".content").map(function() {
    return $(this).outerHeight();
}));
$(".container").height(max);

});

对于此HTML

<div class="container">
<section class="section" >
    <div class="content">
        <div class="inner_content">
             <p>...</p>
        </div>
    </div>
</section>
<section class="section" >
    <div class="content">
        <div class="inner_content">
             <p>...</p>
        </div>
    </div>
</section>
<section class="section" >
    <div class="content">
        <div class="inner_content">
             <p>...</p>
        </div>
    </div>
</section>
</div>

输出

<div class="container" style="height: 500px;">...</div>

我只想要＆＃34; min-height：500px;＆＃34;代替＆＃34;身高：500px;＆＃34;

有人可以帮忙吗？提前谢谢。

Answer 1

（推荐）您可以考虑：Plain HTML/CSS columns techniques

另一种选择是手动执行此操作，在JavaScript中，您可能希望获得孙子孙女的所有高度，然后比较最大值，然后使用How to set minHeight in javascript设置属性值

Answer 2

使用JQuery .css（）方法设置max-height属性。

$(".container").css('max-height',max);

Answer 3

改变这个：

$(".container").height(max);

到此：

$(".container").css("min-height",max);

将容器div的最小高度设置为其孙子div的最大高度

3 个答案: