小贝子编程

如何将前 N 个子高度设置为其父级最大高度 jQuery 或 CSS(首选)?



我已经动态地将divs(.class-row-notification)附加到另一个div(.class-append-con).
现在我想将前5个div高度设置为其父级的max-height(包括margin，padding，bottom-border等)。

更新

增加前五个分区类(.class-row-notification)(儿童分区)==类(.class-append-con)(父分区)的max-height

怎么办呢？如果通过 CSS，它应该是跨浏览器的.
我通过 jQuery 尝试过，但每次它都会为我提供相同的height as 11pxdiv.class-row-notification

编辑：-
我从片段中删除了注释的代码并重试，它在这里工作，但不在我的项目中为什么？

我有以下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>

前段时间我做了一个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'));
});

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

将"apply-max-height"类添加到所需的所有元素中，它们将具有最高高度。希望它对你有用！

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

编辑

为什么？
我发现了问题：-
我没有获得正确的高度，因为，我的父类.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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium