それが要素を絶対配置したときにコンテナを拡張する方法は？

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を拡張しない場合、ボックスは切り捨てられ、私はオーバーフローを使う必要があります：他の理由で隠されています。

これに関する助言？

0

追加された 06 2月 2012 〜で 05:25 著者 rob.m 編集された 07 2月 2012 〜で 08:31

ビュー: 6

源

ru fr es pt de ar

申し訳ありませんが私は上記のコードを更新

追加された 06 2月 2012 〜で 05:38, 著者 rob.m, 源

私はあなたのHTMLにラップボックスが表示されていない、ラップボックスがあります。また、上のコードは、すべてのボックスを互いに重ねるので、間違っています。また、私はあなたがそれのためにjQueryを必要としないと思う、CSSで行うことができます。

追加された 06 2月 2012 〜で 05:35, 著者 bzx, 源

3 答え

このような何か？

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

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

2

追加された 06 2月 2012 〜で 05:33 著者 David

源

ありがとう。 .wrap-boxesの周りに境界を適用すると、1px topしか見ることができません。これは、その高さがそれを使用して変更されていないことを伝えます

追加された 06 2月 2012 〜で 05:37, 著者 rob.m, 源

supadupa :)ありがとう！

追加された 06 2月 2012 〜で 05:47, 著者 rob.m, 源

申し訳ありませんが、増分する前にデフォルト値としてゼロを追加するのを忘れていました。再試行する。

追加された 06 2月 2012 〜で 05:38, 著者 David, 源

私はあなたの.end（）が好きです。最後にheight（）チェーン：

追加された 13 3月 2013 〜で 07:18, 著者 Denis, 源

これは非常に古い質問です。しかし、もうこれをする必要はありません。グリッドのラッパーコンテナの高さを自動的に計算するために、masonryを再初期化することができます。参照： masonry.desandro.com/methods.html#layoutitems アイテムのサイズ変更が完了しました。

追加された 21 6月 2016 〜で 03:47, 著者 James, 源

著者 Diodeus - James MacFarlane · Answer 1 · 2012-02-06T05:28Z

絶対配置された要素はもはやレイアウトの一部ではありません。 JavaScriptを使用して、子要素のサイズと位置を測定し、それに応じて親要素のサイズを設定する必要があります。

著者 xandercoded · Answer 2 · 2012-02-06T05:39Z

純粋な 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" に変更しました。