Как расширить контейнер, если в нем есть абсолютно позиционированные элементы? - PullRequest
Новая
       36

Как расширить контейнер, если в нем есть абсолютно позиционированные элементы?

0 голосов
/ 06 февраля 2012

Допустим, у меня есть

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, ящики будут обрезаны, и мне нужно использовать переполнение: скрыто по другим причинам.

Любая помощь в этом?

Ответы [ 3 ]

2 голосов
/ 06 февраля 2012

Что-то вроде этого может быть? 

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

$('.wrap-boxes').wrapHeight();
1 голос
/ 06 февраля 2012

В чистом виде 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/

Обратите внимание, что я изменил class="mainWrap" на id="mainWrap", чтобы упростить ответ ...

1 голос
/ 06 февраля 2012

Абсолютно позиционированные элементы больше не являются частью макета. Вам необходимо использовать JavaScript для измерения размера и положения дочерних элементов и соответственно установить размер родительского элемента.

...