2014-12-10 3 views
0

Если у меня есть div, который позиционируется как относительный, а затем некоторые div внутри, которые расположены абсолютным, родительский div не будет иметь высоты. Содержимое div может измениться, поэтому мне нужен способ рассчитать высоту содержимого и динамически установить высоту родителя. Есть ли простой способ сделать это в jquery? Смотрите следующий пример:получить вычисленную высоту div с jquery

http://jsfiddle.net/vgyrbcbs/

#parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: #ff0000; 
} 
#child1 { 
    top:0; 
    left:0 
} 
#child2 { 
    top:50px; 
    left:150px; 
} 
#child3 { 
    top:150px; 
    left:20px; 
} 
#child4 { 
    top:250px; 
    left:150px; 
} 
<div id="parent"> 
    <div class="child" id="child1"></div> 
    <div class="child" id="child2"></div> 
    <div class="child" id="child3"></div> 
    <div class="child" id="child4"></div> 
</div> 

Как бы я отрабатывать высоту родителя?

+0

добавить величайшую вершину любого ребенка на высоту child ...;) – webeno

+0

Родительская высота, очевидно, '0' :) –

+1

@ A1rPun Абсолютно позиционированные элементы не влияют на поток макета –

ответ

3

Что-то вроде этого: http://jsfiddle.net/vgyrbcbs/2/

var height = 0; 

$("#parent div").each(function() { 
    height += parseInt($(this).css("height").split("px")[0]); 

}); 

$("#parent").css("height", height); 

UPDATE

Вы можете проверить последнюю DIV, если это всегда на дне, как это: http://jsfiddle.net/vgyrbcbs/4/

$("#parent").css("height", parseInt($("#parent div:last").css("top").split("px")[0]) + parseInt($("#parent div:last").css("height").split("px")[0])); 
+0

'height + = $ (this) .height()' Я пишу раньше в комментариях проще :) –

+0

, но это неправильно, это потому, что я удаляю его) –

+0

Хех, последний div не всегда внизу –

0

Try:

var h = 0; 
$('#parent .child').each(function(){h = Math.max($(this).offset().top + $(this).height(), h);}) 
alert(h); 

Я просто поиск по высоте, как высота верхней + донной дочернего элемента

Fiddle

3

высота родителя на самом деле 0, так как все элементы positionned абсолютно. Если вы ищете высоту содержимого, то свойство scrollHeight родителя предоставит вам эту информацию.

$('#parent')[0].scrollHeight; // or 
$('#parent').get(0).scrollHeight; // or 
$('#parent').prop('scrollHeight'); 
0

попытка подсчитать последний DIV (ребенок 4) смещение сверху + ребенок 4 высоты - родителю смещением верхних

попробовать это

var parent_height = $('#child4').height()+$('#child4').offset().top-$('#parent').offset().top; 
Смежные вопросы