javascript - 如何将前 N 个 child 的高度设置为其父最大高度 jQuery 或 CSS(首选)？

Question

我动态地前置 div (.class-row-notification) 到另一个 div (.class-追加控制).
现在我想将 first 5 div height 设置为其父级的 max-height(包括 margin, padding, bottom-border 等)。

更新

添加前五个 div 类 (.class-row-notification)(children div) == 类的最大高度(.class-append-con)(parent div)

怎么做？如果通过CSS，应该是跨浏览器的。
我通过 jQuery 进行了尝试，但每次它都会给我与 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);
});

更新 margin 和其他属性:

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'));
});

这也适用于调整大小，添加您想要“复制”的属性，就像我对边距所做的一样，您应该没有问题。

将“apply-max-height”类添加到您想要的所有元素，它们将具有最高的高度。希望它对你有用!