web-dev-qa-db-ja.com

jQueryUIスライダー：絶対配置された要素と親コンテナーの高さ

http://jsfiddle.net/SsYwH/ の例があります

うまくいかない場合

HTML：

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS：

.container {
    background: green;
}
.absolute {
    position: absolute;
    background: red;
}

問題

私はjQueryを使用してスライダー効果を作成します。そのためには、絶対位置を設定する必要があります。

  • 私のコードの赤いブロックは、位置の絶対スライダーです。
  • 緑のブロックはコンテナです。

コンテナを子の高さで設定したいのですが。今は絶対的な位置のためにそれを知りません。解決？

cssjquery-uipositionheightabsolute
19
Jens Törnell

次に、jQueryを使用してコンテナーdivの高さを修正する必要もあります。そのようです：

http://jsfiddle.net/khalifah/SsYwH/24/

$( document ).ready(function() {
    $( ".container" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

ただし、絶対配置された要素はそのコンテナの外側に配置できるため、これは誤りです。ビューに関して、含まれているdivで最も下にある要素の下部を見つけるものは何ですか。

7
b01

絶対的に配置された要素は、フローとサイズの点でコンテナのコンテンツにカウントされません。何かを絶対に配置すると、コンテナに関する限りそれが存在しないかのようになり、コンテナがCSSを介して子から「情報を取得」する方法はありません。

スクローラーの高さをJavascriptなしの子要素で決定できるようにする必要がある場合は、相対配置を使用するしかありません。

24
Steven
jQuery('.container > .absolute').each(function() {
    jQuery(this).parent().height('+=' + jQuery(this).height());
    jQuery(this).css('position', 'absolute');
});
.container {
    background: green;
    position: relative;
}
.absolute {
    position: absolute;
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
    Yo
</div>

これはあなたが望んでいることをするはずです。これは、絶対配置された要素が直接の子でなければならないことを前提としています。

また、親要素の子要素の高さを100％にする場合は、height関数の'+=' +を削除することにも注意してください。

http://jsfiddle.net/SsYwH/21/

5
Tyler Crompton

あなたはjqueryでこのようなことをすることができます。 ghoape（jqueryElement）を呼び出します。

var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
    var max_y = 0;
    $.each( $(element).find('*'), function(idx, desc){
        max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );

    });

    return max_y - $(element).offset().top; 
}

これは、すべてのdescendantsを調べて、最大の高さを見つけ、childs.offset（）+その間の差を返します高さ、それから要素のオフセットからそれを差し引きます。

2
Leon