19

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を使用してスライダー効果を作成します。そのためには、絶対位置を設定する必要があります。

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

まだ子供の高さでコンテナを設定したいです。絶対位置のため、今はわかりません。解決？

4

4 に答える 4

24

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

スクローラーがJavascriptなしで子要素によって決定される高さを持つことを許可する必要がある場合、唯一の選択肢は相対配置を使用することです。

于 2011-09-06T14:18:45.447 に答える
7

次に、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の一番下にある要素の下部を見つけるものは、実際には何ですか。

于 2011-09-06T14:23:16.713 に答える
5 

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関数のinを削除することにも注意してください。

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

于 2011-09-06T14:23:31.147 に答える
2

あなたは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; 
}

これにより、すべての子孫が調べられ、最大の高さが検出され、childs.offset（）+その高さの差が返され、要素のオフセットからそれが差し引かれます。

于 2013-12-26T20:55:16.707 に答える