如何设置前N个孩子身高到其父母最大高度jQuery或CSS（首选）？ [英] How to set first N children height to its parent max-height jQuery or CSS(preferred)?

查看：67
本文介绍了如何设置前N个孩子身高到其父母最大高度jQuery或CSS（首选）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将动态前缀 div（ .class-row-notification ）转换为另一个div（ .class-append-con ）。

现在我想设置前5个div （包括保证金，<$> c $ c> padding ， bottom-border 等）。

更新



除了前五个div类（ .class-row-notification ）（ children div ）== max-height .class-append-con ）（父div ）的 / p>

该怎么做？如果通过CSS，它应该是跨浏览器。

我通过jQuery尝试它，但每次它给我相同的 高度为11px 为 div.class-row-notification
$ b

编辑：


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



我有以下html -



var notificationData ='[{notificationObjectId：null，notificationId：null，notifierId：null，actorId：null，entityId：null，entityTypeId：null，notifierName actorName：null，message：< b> Shantaram：< / b> Hello World !!!，notificationLink：＃，createdOn：1512640448139}，{notificationObjectId notificationId：空， notifierId：null，actorId：null，entityId：null，entityTypeId：null，notifierName：null，actorName：null，message：< b> Spring：< b>你好吗，< b> Shantaram< / b> ？ !!!， notificationLink： ＃， createdOn：1512640449140}，{ notificationObjectId：空， notificationId：空， notifierId：空 的actorId：空， ENTITYID：空，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 !!! ;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）。 contentText.removeClass（'class-notification-struct'）; /*contentText.find(\".class-face-noti img）。attr（'src'，notificationData.image）; * / / * contentTe xt.find（。class-name）.html（notificationData [i] .name）; * / /*contentText.find(\".class-notification-link\").prop('href',notificationData[i] .notificationLink）; contentText.find（ 级通知消息。）附加（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（类追加-CON。）; //如果（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）+\\\
Height 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％;显示：块; font-size：13px; / * margin-left：9px; * / vertical-align：top;颜色：＃3F4B57; line-height：15px; max-height：30px; overflow：hidden;}。class-notification-time {font-size：11px;显示：块; color：＃808080;}

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

解决方案

I删除了问题的评论，然后再次尝试，在此工作，但不在我的项目中为什么？


$ b

编辑



为什么？

我找到了问题： -

我没有得到正确的高度，因为我的父类 .class-append-con （在这个问题中），它的父类是隐藏，

这就是为什么我得到 height（）为 0 和 11px



解决方案 $ b我创建了新的div out of viewport ，然后计算身高。

感谢您的宝贵时间和努力。

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：空， notificationId：空， notifierId：空 的actorId：空， ENTITYID：空， entityTypeId ：null，notifierName：null，actorName：null，message：< b> Spring：< / b>你好吗，< b> Shantaram< / b>？!!! notificationLink： ＃， createdOn：1512640449140}，{ notificationObjectId：空， notificationId：空， notifierId：空 的actorId：空， ENTITYID：空， entityTypeId： null，notifierName：null，actorName：null，message：< b> Suyog：< / b> Hello World !!!，通知ionLink ： ＃， createdOn：1512640449140}，{ notificationObjectId：空， notificationId：空， notifierId：空 的actorId：空， ENTITYID：空， entityTypeId：空，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 !!! ;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）。 contentText.removeClass（'class-notification-struct'）; /*contentText.find(\".class-face-noti img）。attr（'src'，notificationData.image）; * / / * contentTe xt.find（。class-name）.html（notificationData [i] .name）; * / /*contentText.find(\".class-notification-link\").prop('href',notificationData[i] .notificationLink）; contentText.find（ 级通知消息。）附加（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（类追加-CON。）; //如果（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％;显示：块; font-size：13px; / * margin-left：9px; * / vertical-align：top;颜色：＃3F4B57; line-height：15px; max-height：30px; overflow：hidden;}。class-notification-time {font-size：11px;显示：块; color：＃808080;}

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


I have dynamically prepended divs (.class-row-notification) to another div (.class-append-con).
Now I want to set first 5 divs height to its parent's max-height (Including margin, padding, bottom-border etc.).

UPDATE

Addition of first five div class (.class-row-notification)(children div) == max-height of class(.class-append-con)(parent div)

How to do that ? If through CSS, it should be cross browser.
I tried it through jQuery but everytime it gives me same height as 11px for the div.class-row-notification

EDIT:-
I removed the commented code from snippet and tried again, its working here but not in my project why?

I have following 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>

解决方案

I removed the comments from question and tried again, its working here but not in my project why?

EDIT

WHY?
I found the ISSUE :-
I was not getting correct height because, my parent class .class-append-con (In this question), its parent class was hidden,
thats why I was getting height() as 0 and outerHeight( true ) as fixed to 11px

Solution
I have created new div out of viewport and then calculated height.

thank you people for your valuable time and efforts. 

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>

这篇关于如何设置前N个孩子身高到其父母最大高度jQuery或CSS（首选）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆