如何將前N個子高度設置為其父max-height jQuery或CSS（首選）？

Question

我已動態添加的div（ .class-row-notification ）到另一個DIV（ .class-append-con ）。
現在我想將前5個 div 高度設置為其父級的max-height （包括margin ， padding ， bottom-border等）。

UPDATE

添加前五個div類（ .class-row-notification ）（ children div ）== max-height of class（ .class-append-con ）（ parent div ）

怎么做 ？ 如果通過CSS，它應該是跨瀏覽器。
我通過jQuery嘗試了它，但每次它給我與div.class-row-notification的div.class-row-notification相同的height as 11px

編輯 ： -
我從代碼段中刪除了注釋后的代碼並再次嘗試，它在這里工作，但不是在我的項目中為什么 ？

我有以下html -

 var notificationData = '[{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Shantaram : </b> Hello World !!!","notificationLink":"#","createdOn":1512640448139},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Spring : </b>How are you, <b>Shantaram</b> ? !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Suyog : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Balasaheb : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Ravi : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Nilesh : </b> Hello World !!! Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!","notificationLink":"#","createdOn":1512640449140}]'; notificationData = JSON.parse(notificationData); // console.log(notificationData); // console.log(notificationData.length); var len = notificationData.length - 5 ; var heightCon = 0; for( var i = 0; i < notificationData.length; ++i ) { contentText = jQuery(".class-notification-struct").clone(true); contentText.removeClass('class-notification-struct'); /*contentText.find(".class-face-noti img").attr('src', notificationData.image);*/ /*contentText.find(".class-name").html(notificationData[i].name);*/ /*contentText.find(".class-notification-link").prop('href',notificationData[i].notificationLink); contentText.find(".class-notification-message").append(notificationData[i].message); var created_on_date = new Date( notificationData[i].createdOn ); contentText.find(".class-notification-time").append( created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString()); */ var created_on_date = new Date( notificationData[i].createdOn ); var row_div = "<div class='class-row-notification'>" +"<a href='"+notificationData[i].notificationLink+"' class='class-notification-link' target='mainfrm' >" +"<span class='class-notification-message'>" +notificationData[i].message +"</span>" +"<span class='class-notification-time'>" +created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString() +"</span>" +"</a>" +"</div>"; jQuery(row_div).prependTo('.class-append-con'); // if( len <= i ) { // heightCon += contentText.outerHeight( true ); // alert(heightCon +" : "+contentText.outerHeight( true )); // } } calculate_height(); function calculate_height(){ var h = 0; $('.class-append-con > .class-row-notification:lt(5)').each( function( i ){ h += $(this).outerHeight( true ); alert( "Height of "+(i+1)+" div :- " +$(this).outerHeight( true )+" \\nHeight Addition :- "+ h ); }); $('.class-append-con').css('max-height', h); } 

 .class-append-con { /* overflow: hidden; */ overflow-y: auto; } .class-row-notification { padding: 5px 0px 5px 15px; background-color: #F0F0F0; border-bottom: 1px solid #C2D0DB; position: relative; } .class-notification-link { text-decoration: none; } .class-notification-message { width: 100%; display: block; font-size: 13px; /* margin-left: 9px; */ vertical-align: top; color: #3F4B57; line-height: 15px; max-height: 30px; overflow: hidden; } .class-notification-time { font-size: 11px; display: block; color: #808080; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="class-append-con"> </div> 

Answer 1

我之前制作了一個jQuery腳本來解決類似的問題。 我的設計是與兄弟元素一起使用，但它也適用於父子元素。

var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function () {
    return $(this).height();
}).get());
$(".apply-max-height").height(maxHeight);
$(window).resize(function() {
    $(".apply-max-height").height("auto");
    var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function() {
        return $(this).height();
    }).get());
    $(".apply-max-height").height(maxHeight);
});

更新保證金和其他財產：

var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function () {
    return $(this).height();
}).get());
$(".apply-max-height").height(maxHeight);
$('.children-element').css('margin', $('.parent-element').css('margin'));
$(window).resize(function() {
    $(".apply-max-height").height("auto");
    var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function() {
        return $(this).height();
    }).get());
    $(".apply-max-height").height(maxHeight);
    $('.children-element').css('margin', $('.parent-element').css('margin'));
});

這也適用於調整大小，添加你想要“復制”的屬性，就像我使用margin一樣，你應該沒有問題。

將“apply-max-height”類添加到所需的所有元素中，它們將具有最高的高度。 希望這對你有用！

Answer 2

我刪除了問題中的評論並再次嘗試，它在這里工作，但不是在我的項目中為什么 ？

編輯

為什么？
我找到了問題： -
我沒有得到正確的高度，因為我的父類.class-append-con （在這個問題中），它的父類被隱藏了 ，
這就是為什么我將height()設為0 ，將outerHeight( true )設為固定為11px

解
我已經從視口中創建了新的div，然后計算了高度。

謝謝你們寶貴的時間和精力。

 var notificationData = '[{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Shantaram : </b> Hello World !!!","notificationLink":"#","createdOn":1512640448139},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Spring : </b>How are you, <b>Shantaram</b> ? !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Suyog : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Balasaheb : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Ravi : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Nilesh : </b> Hello World !!! Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!","notificationLink":"#","createdOn":1512640449140}]'; notificationData = JSON.parse(notificationData); // console.log(notificationData); // console.log(notificationData.length); var len = notificationData.length - 5 ; var heightCon = 0; for( var i = 0; i < notificationData.length; ++i ) { contentText = jQuery(".class-notification-struct").clone(true); contentText.removeClass('class-notification-struct'); /*contentText.find(".class-face-noti img").attr('src', notificationData.image);*/ /*contentText.find(".class-name").html(notificationData[i].name);*/ /*contentText.find(".class-notification-link").prop('href',notificationData[i].notificationLink); contentText.find(".class-notification-message").append(notificationData[i].message); var created_on_date = new Date( notificationData[i].createdOn ); contentText.find(".class-notification-time").append( created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString()); */ var created_on_date = new Date( notificationData[i].createdOn ); var row_div = "<div class='class-row-notification'>" +"<a href='"+notificationData[i].notificationLink+"' class='class-notification-link' target='mainfrm' >" +"<span class='class-notification-message'>" +notificationData[i].message +"</span>" +"<span class='class-notification-time'>" +created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString() +"</span>" +"</a>" +"</div>"; jQuery(row_div).prependTo('.class-append-con'); // if( len <= i ) { // heightCon += contentText.outerHeight( true ); // alert(heightCon +" : "+contentText.outerHeight( true )); // } } calculate_height(); function calculate_height(){ var h = 0; $('.class-append-con > .class-row-notification:lt(5)').each( function( i ){ h += $(this).outerHeight( true ); alert(h +" : "+$(this).outerHeight( true ) +" : "+i); }); $('.class-append-con').css('max-height', h); } 

 .class-append-con { /* overflow: hidden; */ overflow-y: auto; } .class-row-notification { padding: 5px 0px 5px 15px; background-color: #F0F0F0; border-bottom: 1px solid #C2D0DB; position: relative; } .class-notification-link { text-decoration: none; } .class-notification-message { width: 100%; display: block; font-size: 13px; /* margin-left: 9px; */ vertical-align: top; color: #3F4B57; line-height: 15px; max-height: 30px; overflow: hidden; } .class-notification-time { font-size: 11px; display: block; color: #808080; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class-append-con"> </div>