컨테이너를 절대적으로 배치했을 때 컨테이너를 확장하는 방법은 무엇입니까?

Question

내가 가진 말할 수 있습니다

CSS :

.mainWrap { position: relative; overflow: hidden; } 
.wrap-boxes { positon: relative; } 
.box { position:absolute (position and height is generated by plugin isotope: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html } 

HTML :

<div class"mainWrap"> 
    <div class="wrap-boxes"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
    </div> 

clearfix은 그것의 절대 위치를 가진 요소가 작동하지 않습니다 - 박스 포장에 적용.

그러므로 jQuery를 사용하여 랩 상자를 확장하려면 상자의 높이를 계산해야합니다. 나는이 상자의 높이가 무작위로 높다는 것을 모르고 있으며 상자가 클라이언트에 의해 끊임없이 생성되므로 상자의 수를 모릅니다. 나는 그것을 해결하는 일반적인 jQuery가 필요할 것이다. mainWrap을 확장하지 않으면 상자가 잘리고 오버플로를 사용해야합니다. 다른 이유 때문에 숨겨져 있습니다.

어떤 도움이 필요합니까?

Answer 1

어쩌면 이런가? 순수에서

$.fn.wrapHeight = function() { 
    return this.each(function() { 
     var height = 0; 
     $(this).children().each(function() { 
      height += $(this).height(); 
     }).end().height(height); 
    }); 
}; 

$('.wrap-boxes').wrapHeight(); 

Answer 2

절대적으로 배치 된 요소는 더 이상 레이아웃의 일부가 아닙니다. JavaScript를 사용하여 하위 요소의 크기와 위치를 측정하고 이에 따라 상위 요소의 크기를 설정해야합니다.

Answer 3

다음 사용할 수 JavaScript :

var wrapbox = document.getElementById('mainWrap').childNodes[1], 
    els = wrapbox.childNodes, 
    i, 
    height = 0; 

for (i in els) { 
    if(els[i].nodeType == 1) { 
     height += parseInt(els[i].offsetHeight); 
    } 

    wrapbox.style.height = height + 'px'; 
} 

http://jsfiddle.net/AJLe7/1/

공지 사항 내가 대답을 단순화하는 id="mainWrap"에 class="mainWrap"를 변경 ...