如何将前N个子高度设置为其父级max-height jQuery或CSS（首选）？

时间：2017-12-07 10:47:05

标签： javascript jquery html css

我已动态预先 div（ .class-row-notification ）到另一个div（ .class-append-con ）。
现在我想将前5 div 高度设置为其父 max-height （包括margin，{{1} }，padding等。

更新

添加前五个div类（ bottom-border ）（儿童div ）== .class-row-notification 类（ max-height ）（父div ）

怎么做？如果通过CSS，它应该是跨浏览器 我通过jQuery尝试了它，但每次它为 .class-append-con

提供相同的 height as 11px

修改： -
我从代码段中删除了评论代码并再次尝试，在这里工作，但不在我的项目中为什么？

我有以下html - 

div.class-row-notification
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;
}

2 个答案:

答案 0 :(得分：0)

我之前制作了一个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”类添加到您想要的所有元素中，它们将具有最高的高度。希望它适合你！

答案 1 :(得分：0)

我删除了问题中的评论并再次尝试，它在这里工作但不在我的项目中为什么？

修改

<强> WHY吗
我找到了问题： -
我没有得到正确的身高，因为我的父班 .class-append-con （在这个问题中），其父班是隐藏，
这就是为什么我将height()作为 0 而outerHeight( true )修复为 11px

<强>解决方案
我创建了新的div out of viewport ，然后计算了高度。

谢谢你们宝贵的时间和精力。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
.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;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class-append-con">
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题